Disable submit button if inputs are empty with jQuery

Question

I try to disable the submit button until the user fills in the input fields on the form.

I found an IT stream that had a really good answer. I had a slight problem with returning the submit button when the fields are populated.

Can someone please take a look at this feature and help me understand what I am missing? Any help would be greatly appreciated: D Thank you.

Heres a Fiddle also

$(document).ready(function() { var $submit = $("input[type=submit]"); if ( $("input:empty").length > 0 ) { $submit.attr("disabled","disabled"); } else { $submit.removeAttr("disabled"); } }); <form method="POST" action="<%=request.ServerVariables("SCRIPT_NAME")%>"> User Name: <input name="Username" type="text" size="14" maxlength="14" /><br /> Password: <input name="last_name" type="password" size="14" maxlength="14"><br /> <input type="submit" value="Login" name="Submit" id="loggy"> </form> 

Answer 1

 $(document).ready(function() { var $submit = $("input[type=submit]"), $inputs = $('input[type=text], input[type=password]'); function checkEmpty() { // filter over the empty inputs return $inputs.filter(function() { return !$.trim(this.value); }).length === 0; } $inputs.on('blur', function() { $submit.prop("disabled", !checkEmpty()); }).blur(); // trigger an initial blur }); 

Working example

Instead of blurring, you can also use keyup like:

  $inputs.on('keyup', function() { $submit.prop("disabled", !checkEmpty()); }).keyup(); // trigger an initial keyup 

You can also combine several events:

  $inputs.on('keyup blur', function() { $submit.prop("disabled", !checkEmpty()); }).keyup(); // trigger any one 

Answer 2

In your question, I do not see the code where you constantly check the status of the inputs, I think the problem is that.

You can use live events for this. Using your code as an example:

 $(document).ready(function() { var $submit = $("input[type=submit]"); function checkSubmitState() { if ( $("input:empty").length > 0 ) { $submit.attr("disabled","disabled"); } else { $submit.removeAttr("disabled"); } } // check the submit state on every change or blur event. $("input").live("change blur", checkSubmitState); }); 

Answer 3

Use the keyup event to check the value before running the condition:

 $(document).ready(function() { $('input:text, input:password').keyup(function() { if ($(this).val() !== "") { $('input:submit').removeAttr('disabled'); } else { $('input:submit').attr('disabled', 'true'); } }); }); 

http://jsfiddle.net/tovic/He4Kv/23/

Answer 4

Some of these answers are deprecated here as I was looking for a jQuery snippet. I tested them and they don't seem to work properly due to the flaws that I think.

So, I made my own, and here is a newer working path (jQuery> = 3.0) that listens for, for example, an input event.

 let inp = $('[type=text]'), btn = $('[type=button]') btn.prop('disabled', true) inp.on('input', () => { let empty = [] inp.map(v => empty.push(inp.eq(v).val())) btn.prop('disabled', empty.includes('')) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <form> <input type=text><br> <input type=text><br> <input type=text><br> <input type=button value=Send> </form> 

An example of simple JavaScript is here .