Form handling onsubmit, onchange, onselect, onblur, onfocus
3. onchange
This is used to detect changes in value of form
elements.
The
example below shows a code where a function myFunction() is called when the user changes the
value of their input in the textbox. When the user changes their input in the
textbox, the new value is printed. When the user presses enter but the value in
the textbox has not changed, no action is executed.
<form>
<label for="uname">Username: </label>
<input type="text" value="Type here" id="uname" onchange="myFunction()">
</form>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("uname").value;
document.getElementById("demo").innerHTML = "The value is changed! The new value is: " + x;
}
</script>
Another example is shown below on how the onchange event handler is used. This time, instead of a textbox, a selection element is used. A function is triggered whenever the user changes their choice. Notice that the value property also works in retrieving the input from a select element.
<form>
<select id="selection" onchange="myFunction()">
<option value="Coffee">Coffee</option>
<option value="Tea">Tea</option>
<option value="Juice">Juice</option>
</select>
</form>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("selection").value;
document.getElementById("demo").innerHTML = "Your new choice is " + x + ".";
}
</script>