HTML onchange Event Attribute
Description
The onchange
HTML event attribute fires when the value of an HTML element is changed. This can happen when the user changes the value of a form element, such as a text input, checkbox, or select element, or when the value of an element is changed by JavaScript code.
The onchange
event is similar to the oninput
event, but there are a few key differences. The oninput
event fires immediately after the value of an element is changed, while the onchange
event fires when the element loses focus. This means that the onchange
event is only fired when the user has finished changing the value of the element.
Additionally, the onchange
event also works on <select>
elements, while the oninput
event does not. This is because the value of a <select>
element is not changed until the user selects an option and the element loses focus.
The onchange
event can be used to perform a variety of tasks, such as:
- Validating form input
- Updating other elements on the page when the value of an element is changed
- Submitting a form when the user changes the value of a form element
- Performing calculations based on the value of an element
For example, the following code shows how to use the onchange
event to validate the value of a text input field:
<input type="text" id="name" onchange="validateName()">
function validateName() {
var name = document.getElementById('name').value;
if (name === '') {
alert('Please enter your name.');
}
}
In this example, the validateName()
function is called whenever the user changes the value of the name
text input field. The function checks to see if the value of the field is empty. If it is, the function displays an alert message.
Syntax
<element onchange="script">
Values
- scriptThe name of the script to use when the event has been triggered.
Example
<!DOCTYPE html>
<html>
<head>
<title>onchange event</title>
</head>
<body>
<p>Type any text and remove focus from the element:</p>
<input type="text" name="testInput" id="testInput" onchange="testFunction()">
<p id="info2"> </p>
<script>
function testFunction() {
var x = document.getElementById("testInput").value;
document.getElementById("info2").innerHTML="You typed the following text: " + x;
}
</script>
</body>
</html>
Browser Support
The following table will show you the current browser support for the HTML onchange
Event Attribute.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023