禁用/启用提交按钮，直到用户填写所有表单详细信息，考虑我使用 php？答案

【问题标题】：disable /enable submit button until the user fill in all form details, consider i use php?禁用/启用提交按钮，直到用户填写所有表单详细信息，考虑我使用 php？
【发布时间】：2017-12-30 22:46:43
【问题描述】：

这是我网站的形式：

<form name="form2" id="form2"  action="login.php" method="post">
   <fieldset >
      <legend >sign in :</legend >
      Username:<input type="text" size="40" name="username" 
         class="auto-clear" title="Username">
      <p />
         Email: <input id="email" name="email" type="email" 
            oninput="setText()" size="40"  ><br>
         <br>
         password:<input type="password" size="40" name="pass" >
      <p />
         <input type="submit" name="signup" id="ok-btn" value="sign up" 
            height:200px font-size:14pt disabled >
   </fieldset>
</form>

如何在我填写完所有详细信息后才启用提交按钮？？？

【问题讨论】：

jQuery disable/enable submit button的可能重复

标签： javascript php html button

【解决方案1】：

您可以通过 javaScript 做到这一点：

$(document).ready(function() {
 $(':input[type="submit"]').prop('disabled', true);
 $('input[type="text"]').keyup(function() {
    if($(this).val() != '') {
       $(':input[type="submit"]').prop('disabled', false);
    }
 });
$('input[type="email"]').keyup(function() {
    if($(this).val() != '') {
       $(':input[type="submit"]').prop('disabled', false);
    }
 });
});

【讨论】：

【解决方案2】：

这是一个使用 jQuery 的简单解决方案：

$(document).ready(function() {
  var submitBtn = $(':submit').prop('disabled', true);
  var requiredInputs = $(':input').not(submitBtn);

  requiredInputs.keyup(function() {
    var emptyInputs = requiredInputs.filter(function() {
      return !this.value;
    });
    
    submitBtn.prop('disabled', emptyInputs.length > 0);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="form2" id="form2" action="login.php" method="post">
  <fieldset>
    <legend>sign in :</legend>
    Username:<input type="text" size="40" name="username" class="auto-clear" title="Username">
    <p /> Email: <input id="email" name="email" type="email" size="40"><br>
    <br> password:
    <input type="password" size="40" name="pass">
    <p />
    <input type="submit" id="ok-btn" name="signup" value="sign up" style="height:200px font-size:14pt" disabled>
  </fieldset>
</form>

【讨论】：