live validation with javascript - onchange only triggered once

javascript html validation onchange

27,903

Solution 1

You have to add the onclick and onkeyup event in order to respond to mouse interactions and to inserts from the clipboard:

http://jsfiddle.net/wzvvN/1

<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

Solution 2

You may want to use onkeyup(), since onchange() gets called only when you switch focus to another element.

Also, your function is currently comparing strings. Use parseInt to convert to an integer and then compare. The following code works for me:

<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
  var first = parseInt(document.getElementById('first').value, 10);
  var second = parseInt(document.getElementById('second').value, 10);

  if(first > second){
    document.getElementById('sub').disabled=false;
  } else {
    document.getElementById('sub').disabled=true;   
  }
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>

Solution 3

Try binding the onfocus and onblur events to.

<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>

27,903

Author by

deemel

Updated on July 27, 2022

Comments

deemel almost 2 years

So I'm just testing something with js, basically the number in the first input has to be bigger than the number in the second input for the submit button to be activated.

The button get's disabled just right, but if I change the number it won't activate again

<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;

if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;   
}


}
</script>
<input type="submit" id="sub"/>
</body>
</html>

Edit: The arrows of the number input trigger onchange it seems, that caused the problem

deemel over 12 years

that doesn't work well with the html5 number input, for onkeyup I'm not getting any response at all
Ben Swinburne over 12 years

perhaps try with the onfocus event instead?
deemel over 12 years

yup noticed I got an error in there while I tried it and it didn't work because of that
AbdullahC over 12 years

@ComFreek: onkeyup() is what's making it work in that code.
Martin Borthiry over 12 years

mmm, sorry but is possible to change the value using the mouse paste.. onchange is needed
ComFreek over 12 years

@Hippo onclick is needed because you can also change the value with the mouse!
AbdullahC over 12 years

Hmm...looks like a combination of onkeyup, onclick, and onchange works better. Without the onchange(), the callback isn't triggered when you paste using the mouse and switch focus using the Tab key.
tony gil over 10 years

in my case, onblur was the best solution, because i wanted to check contents once the input field LOST focus (i.e. user stopped editing). UPVOTED :)