All geek questions in one place

Real-time validation with javascript - onchange runs only once

So, I'm just testing something with js, basically the number on the first input should be greater than the number on the second input to activate the submit button.

The button turns off correctly, but if I change the number, it will not be activated 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: It seems that the number arrows enter the trigger, which caused the problem

+4
source share
3 answers

You need to add the onclick and onkeyup to respond to mouse interactions and paste 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()" />
+4
source

You can use onkeyup() , since onchange() is called only when the focus is switched to another element.

In addition, 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>
+3
source

Try binding 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>
+3
source

Source: https://habr.com/ru/post/1380906/

More articles:


All Articles