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

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

您只需要遍历每个输入并检查单击按钮时是否设置了值，如下所示：

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

要查看实际效果，请访问此小提琴 。

Answer 2

您可以向click事件中添加一些逻辑，并检查所有输入字段的值，如下所示

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

请记住，先前的代码仅适用于输入字段。

Answer 3

试试这个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;
    });
});

填写初始表单中的所有字段后，将启用该按钮。 然后，用户将能够单击按钮以查看表单的其余部分。