disable submit button if inputs are empty with jQuery

Question

I'm attempting to disable a submit button untill the user has filled out the input fields in the form.

I found THIS thread here which had a really good answer. I'm having just a little problem getting the submit button the re-enable when the fields are filled out.

Can someone please take a look at this function and help me figure out what I'm 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>

Outrush

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 sample

Instead of blur you can also use keyup like:

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

Also you can combine multiple events:

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

Soap

Thank you very much! that works wonderfully :D is it possible to change the on blur? so the user doesn't have to click away from the inputs in order for the disable to be removed? – Outrush

nevermind, i changed 'blur' to 'keypress' and got the exact result i was hoping for. Thank you again very much for your help and your demo! :D – Outrush

Answer 2

In your question I don't see the code where you check the state of inputs constantly, I think the problem is that.

You can use live events to do that. Using your code as 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);
});

Fructiferous

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/

Glauce

Answer 4

Some of these answers here are a lil out of date as I was looking for a jQuery snippet. I tested them and they do not seem to function properly anymore due to deprecations I think.

So I made my own and here is a newer working way (jQuery >=3.0) which listens to on input event for example.

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>

A plain JavaScript example is here.

Bed