Disable/Enable Submit Button until all forms have been filled

Question

I want my form submit button to be disabled/enabled depending on if the form is completely filled.

When the inputs are filled, the disabled button changes to enabled. That works great. But I would like it to disable the button when an input gets emtied.

This is my script:

<script type="text/javascript" language="javascript">     function checkform()     {         var f = document.forms["theform"].elements;         var cansubmit = true;          for (var i = 0; i < f.length; i++) {             if (f[i].value.length == 0) cansubmit = false;         }          if (cansubmit) {             document.getElementById('submitbutton').disabled = false;         }     } </script>  <form name="theform"> <input type="text" onKeyup="checkform()" /> <input type="text" onKeyup="checkform()" /> <input id="submitbutton" type="submit" disabled="disabled" value="Submit" /> </form> 

Answer 1

Just use

document.getElementById('submitbutton').disabled = !cansubmit; 

instead of the the if-clause that works only one-way.

Also, for the users who have JS disabled, I'd suggest to set the initial disabled by JS only. To do so, just move the script behind the <form> and call checkform(); once.

Answer 2

Just add an else then:

function checkform() {     var f = document.forms["theform"].elements;     var cansubmit = true;      for (var i = 0; i < f.length; i++) {         if (f[i].value.length == 0) cansubmit = false;     }      if (cansubmit) {         document.getElementById('submitbutton').disabled = false;     }     else {         document.getElementById('submitbutton').disabled = 'disabled';     } }