disable /enable submit button until the user fill in all form details, consider i use php?

Question

this is the form of my website:

<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>

how to enable the submit button only after i fill all details???

Answer 1

You can do this via 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);
    }
 });
});

Answer 2

Heres' a simple solution using 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>