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

我试图隐藏部分窗体的按钮被禁用，并让用户点击按钮来显示其余的窗体，当前面的字段被填入。任何人都可以帮忙吗？这里是我的代码为例：填写字段时如何启用按钮？

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>

来源

2014-10-07 Military911

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

这将使该按钮时，在初始形式的所有字段被填充。然后用户将能够点击该按钮来查看表格的其余部分。

来源

2014-10-07 15:53:42 Ashutosh

由于检查输入值的代码只在文档准备就绪时执行一次，因此无法保持字段被修改的轨道。此外，它并没有验证字段被填充在点击按钮上 – academo 2014-10-07 15:58:27

@academo是不是像用户想要启用按钮只有当所有上述字段填充，因为他最初设置按钮为“禁用”？ – Ashutosh 2014-10-07 16:01:00

谢谢。这很好。如果他们决定删除之前的某个字段，是否有办法隐藏表单的第二部分？ – Military911 2014-10-07 16:04:39

你只需通过每个输入需要循环，并检查是否当按钮被点击这样的值设置：

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

来源

2014-10-07 15:48:02

您可以添加一些逻辑来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(); 
    } 
});

值记住前面的代码只能与输入下地干活。

来源

2014-10-07 15:52:42 academo

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

回答

相关问题