Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML onchange Event Attribute
The onchange event attribute in HTML is triggered when the value of a form element changes and loses focus. This event is commonly used with form controls like input fields, select dropdowns, and textareas to execute JavaScript code when the user modifies the element's value.
Syntax
Following is the syntax for the onchange event attribute −
<tagname onchange="script"></tagname>
Where script is the JavaScript code to execute when the change event occurs.
Supported Elements
The onchange event attribute is supported on the following HTML elements −
<input>elements (text, password, email, number, date, etc.)<select>dropdown lists<textarea>multi-line text areas
Using onchange with Select Element
The most common use of onchange is with select dropdowns to respond immediately when a user selects a different option.
Example
Following example demonstrates the onchange event with a select dropdown −
<!DOCTYPE html>
<html>
<head>
<title>onchange with Select</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Your Favorite Subject</h2>
<select onchange="showSelection()" id="subjects">
<option value="">Choose a subject...</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="mathematics">Mathematics</option>
</select>
<p id="result"></p>
<script>
function showSelection() {
var select = document.getElementById("subjects");
var result = document.getElementById("result");
if (select.value) {
result.innerHTML = "You selected: " + select.options[select.selectedIndex].text;
} else {
result.innerHTML = "";
}
}
</script>
</body>
</html>
The output shows the selected subject when the dropdown value changes −
Select Your Favorite Subject [Choose a subject... ?] (When Physics is selected: "You selected: Physics")
Using onchange with Input Elements
The onchange event with input elements triggers when the user changes the value and moves focus away from the element (blur event).
Example − Text Input
<!DOCTYPE html>
<html>
<head>
<title>onchange with Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Name Validation</h2>
<label for="username">Enter your name:</label>
<input type="text" id="username" onchange="validateName()" placeholder="Type your name">
<p id="message"></p>
<script>
function validateName() {
var input = document.getElementById("username");
var message = document.getElementById("message");
var name = input.value.trim();
if (name.length < 2) {
message.innerHTML = "Name must be at least 2 characters long.";
message.style.color = "red";
} else {
message.innerHTML = "Hello, " + name + "!";
message.style.color = "green";
}
}
</script>
</body>
</html>
The validation message appears when the user types a name and clicks away from the input field.
Example − Number Input
<!DOCTYPE html>
<html>
<head>
<title>onchange with Number Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temperature Converter</h2>
<label for="celsius">Celsius:</label>
<input type="number" id="celsius" onchange="convertToFahrenheit()" placeholder="Enter temperature">
<p id="fahrenheit"></p>
<script>
function convertToFahrenheit() {
var celsius = document.getElementById("celsius").value;
var result = document.getElementById("fahrenheit");
if (celsius !== "") {
var fahrenheit = (celsius * 9/5) + 32;
result.innerHTML = celsius + "°C = " + fahrenheit.toFixed(1) + "°F";
} else {
result.innerHTML = "";
}
}
</script>
</body>
</html>
When a user enters a temperature in Celsius and moves focus away, the Fahrenheit equivalent is calculated and displayed.
onchange vs oninput
It is important to understand the difference between onchange and oninput events −
| onchange Event | oninput Event |
|---|---|
| Triggers when value changes and element loses focus | Triggers immediately as user types |
| Good for validation after user completes input | Good for real-time feedback |
| Works with all form elements | Works mainly with text-based inputs |
| Fires less frequently | Fires on every keystroke |
Example − Comparing onchange and oninput
<!DOCTYPE html>
<html>
<head>
<title>onchange vs oninput</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Comparison</h2>
<label for="input1">onchange (fires on blur):</label>
<input type="text" id="input1" onchange="showChange()" placeholder="Type and click away">
<p id="changeResult"></p>
<label for="input2">oninput (fires immediately):</label>
<input type="text" id="input2" oninput="showInput()" placeholder="Type here">
<p id="inputResult"></p>
<script>
function showChange() {
var value = document.getElementById("input1").value;
document.getElementById("changeResult").innerHTML = "onchange fired: " + value;
}
function showInput() {
var value = document.getElementById("input2").value;
document.getElementById("inputResult").innerHTML = "oninput fired: " + value;
}
</script>
</body>
</html>
The first input shows the value only after losing focus, while the second updates in real-time as you type.
Conclusion
The onchange event attribute is essential for creating interactive forms that respond to user input changes. It triggers when an element's value changes and the element loses focus, making it ideal for validation and form processing. Use onchange for actions that should occur after the user finishes editing, and oninput for real-time feedback during typing.
639 Views
