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
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023