字段填写后如何启用按钮？

Question

I'm trying to hide part of the form with the button disabled and have the user click on the button to show rest of form when previous fields are filled in. Can anyone help? Here's my code as an example:

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

You just need to loop through each input and check if a value is set when the button is clicked like this:

$('#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();
    }
});

I also needed to add some classes to your 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>

To see it in action visit this fiddle .

Answer 2

You can add some logic to the click event and check all the input fields to have a value like this

$("#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();
   }
});

Keep in mind the previous code only work with input fields.

Answer 3

Try this 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;
    });
});

This will enable the button when all the fields in the initial form are filled. Then the user will be able to click on the button to see the rest of the form.