html <input type="text" /> onchange event not working

Question

I am trying to do some experiment. What I want to happen is that everytime the user types in something in the textbox, it will be displayed in a dialog box. I used the onchange event property to make it happen but it doesn't work. I still need to press the submit button to make it work. I read about AJAX and I am thinking to learn about this. Do I still need AJAX to make it work or is simple JavaScript enough? Please help.

index.php

<script type="text/javascript" src="javascript.js"> </script>  <form action="index.php" method="get">  Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />  Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />  <input type="submit" value="Compute" /> </form> 

javascript.js

function checkInput(textbox) {  var textInput = document.getElementById(textbox).value;   alert(textInput);  } 

Answer 1

onchange is only triggered when the control is blurred. Try onkeypress instead.

Answer 2

Use .on('input'... to monitor every change to an input (paste, keyup, etc) from jQuery 1.7 and above.

For static and dynamic inputs:

$(document).on('input', '.my-class', function(){     alert('Input changed'); }); 

For static inputs only:

$('.my-class').on('input', function(){     alert('Input changed'); }); 

JSFiddle with static/dynamic example: https://jsfiddle.net/op0zqrgy/7/