Why submit button is not enabled immediately on change to textfield?

Question

With this code The button will become enabled only after:

1. I type something in textfield

2. I change the focus out of the textfield.

How can I get the button to enable as soon as something is typed in?

  function validateAmount(){ if ($('#parlay-amount-textfield').val().length > 0) { $("#parlay-submit-button").prop("disabled", false); } else { $("#parlay-submit-button").prop("disabled", true); } } $(document).ready(function(){ validateAmount(); $('#parlay-amount-textfield').change(validateAmount); }); 

Answer 1

The change event doesn't fire until focus leaves the input field.

You can use the input event instead on modern browsers, which fires immediately. Or a combination of events to support slightly older browsers: input change paste click which you can respond to immediately and then keydown which you need to respond to after a very brief delay. But I think input 's support is very good these days, with the notable exception of IE8 which doesn't support it.

Example with just input :

 function validateAmount() { if ($('#parlay-amount-textfield').val().length > 0) { $("#parlay-submit-button").prop("disabled", false); } else { $("#parlay-submit-button").prop("disabled", true); } } $(document).ready(function() { validateAmount(); $('#parlay-amount-textfield').on("input", validateAmount); }); 

 <input type="text" id="parlay-amount-textfield"> <input type="button" id="parlay-submit-button" value="Send"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Example with input change paste click handled immediately and keydown after a very brief delay:

 function validateAmount() { if ($('#parlay-amount-textfield').val().length > 0) { $("#parlay-submit-button").prop("disabled", false); } else { $("#parlay-submit-button").prop("disabled", true); } } $(document).ready(function() { validateAmount(); $('#parlay-amount-textfield') .on("input change paste click", validateAmount) .on("keydown", function() { setTimeout(validateAmount, 0); }); }); 

 <input type="text" id="parlay-amount-textfield"> <input type="button" id="parlay-submit-button" value="Send"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Side note: FWIW, validateAmount can be a bit shorter:

function validateAmount() {
  $("#parlay-submit-button").prop("disabled", $('#parlay-amount-textfield').val().length == 0);
}

And if just spaces isn't a valid value, you might consider throwing a $.trim() around $('#parlay-amount-textfield').val() (or on modern browsers, using $('#parlay-amount-textfield').val().trim() ).

Answer 2

Since we are using the change event the input fields focus tends to say that user has not yet ended up his field with data.so only after the focus is moved the button gets enabled u can use the above Link for further clarifications
[1]"https://jsfiddle.net/MuthuramanNagarajan/gs2sff6j/"