Как включить кнопку при заполнении полей?

Question

Я пытаюсь скрыть часть формы с отключенной кнопкой и нажать на кнопку, чтобы показать остальную форму, когда заполнены предыдущие поля. Может ли кто-нибудь помочь? Вот мой код, как пример:

HTML

<form> 
<div id="group1"> 

     <label>Field 1:</label> 
     <input type="text" class="field1"/><br/> 
     <label>Field 2:</label> 
     <input type="text" class="field2"/><br/> 
     <label>Field 3:</label> 
     <input type="text" class="field3"/><br/> 

</div> 

    <div align="center"> 
    <button id="show_form" onClick = "this.style.display= 'none'" disabled="disabled"> 
    Enter Billing Info</button> 
    </div> 

<div id="group2"> 

     <label>Field 4:</label> 
     <input type="text" class="field4"/><br/> 
     <label>Field 5:</label> 
     <input type="text" class="field5"/><br/> 
     <label>Field 6:</label> 
     <input type="text" class="field6"/><br/> 

</div> 
</form> 

Jquery

<script> 
$(document).ready(function() { 
    $('#group1').find('input[type="text"]').keyup(function() { 
    var flag = true; 
    $('#group1').find('input[type="text"]').each(function() { 
     if ($(this).val().length === 0) { 
      flag = false; 
      return; 
     } 
    }); 

    if (flag) { 
     $("#show_form").prop("disabled", false); 
    } else { 
     $("#show_form").prop("disabled", true); 
     $("#group2").hide(); 

     $("#show_form").show(); 
    } 
}); 

$("#group2").hide(); 

$("#show_form").click(function(){ 
    $("#group2").show(); 

    return false; 
}); 

}); 
</script> 

Answer 1

Попробуйте JQuery:

$(document).ready(function() { 
    $('#group1').find('input[type="text"]').keyup(function() { 
     var flag = true; 
     $('#group1').find('input[type="text"]').each(function() { 
      if ($(this).val().length === 0) { 
       flag = false; 
       return; 
      } 
     }); 

     if (flag) { 
      $("#show_form").prop("disabled", false); 
     } else { 
      /* This will hide the bottom form and disable the button again if 
      * any of the field above will be emptied. 
      * NOTE: This will just hide the form; it will not clear the fields. 
      */ 
      $("#show_form").prop("disabled", true); 
      $("#group2").hide(); 
     } 
    }); 

    $("#group2").hide(); 
    $("#show_form").click(function(){ 
     $("#group2").show(); 
     return false; 
    }); 
}); 

Это позволит кнопку, когда все поля в исходной форме заполняются. Затем пользователь сможет щелкнуть по кнопке, чтобы увидеть остальную часть формы.

Answer 2

Вам просто нужно Переберите каждого входа и проверить, если значение устанавливается при нажатии кнопки, как это:

$('#show_form').click(function() { 
    var fields = $('.js-field'); 
    var pass = true; 

    for (var i = 0; i < fields.length; i++) { 
     if (!$(fields[i]).val()) { 
      pass = false; 
     } 
    } 

    if (pass === true) { 
     $('#group2').show(); 
    } 
}); 

Я также необходимо добавить несколько классов в HTML:

<form> 
<div id="group1"> 

     <label>Field 1:</label> 
     <input type="text" class="field1 js-field"/><br/> 
     <label>Field 2:</label> 
     <input type="text" class="field2 js-field"/><br/> 
     <label>Field 3:</label> 
     <input type="text" class="field3 js-field"/><br/> 

</div> 

<button type="button" id="show_form" value="Show_Form">Enter Billing  
Info</button> 

<div id="group2" style="display: none;"> 

     <label>Field 4:</label> 
     <input type="text" class="field4"/><br/> 
     <label>Field 5:</label> 
     <input type="text" class="field5"/><br/> 
     <label>Field 6:</label> 
     <input type="text" class="field6"/><br/> 

</div> 
</form> 

Чтобы увидеть это в действии, посетите этот fiddle.

Answer 3

Вы можете добавить некоторую логику в случае щелчка и проверьте все поля ввода, чтобы иметь значение, как этот

$("#show_form").click(function(){ 
    var allFilled = true; 

    $('#group1').find('input').each(function(){ 
     //if someone is empty allFilled will keep false 
     if(this.value === ''){ 
     allFilled = false; 
     //this breaks the each 
     return false; 
     } 
    }); 

    if(allFilled){ 
     $("#group2").show(); 
    } 
}); 

Имейте в виду предыдущий код работает только с полями ввода.