HTML onchange Event Attribute
Last Updated :
20 Dec, 2023
The onchange event attribute works when the value of the element changes and select the new value from the List. It is a part of the event attribute. It is similar to oninput event attribute. But the difference is that oninput attribute event occurs immediately after the value of the element changes, while onchange event occurs when the element loses focus. This attribute is associated with <select> element.
It is commonly employed in forms to validate or process data upon user interaction and enables real-time updates and validation, enhancing the user experience.
Syntax:Â
<element onchange = "script">
Supported Tags:
Attribute Value:
This attribute contains single value script which works when onchange attribute called.
Example:Â
In this example, we will see the implementation of onchange tag.
html
<!DOCTYPE html>
<html>
<head>
<title>onchange event attribute</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
onchange Event Attribute
</h2>
<p>
Choose Subject:
</p>
<select id="GFG" onchange="Geeks()">
<option value="Data Structure">Data Structure
<option value="Algorithm">Algorithm
<option value="Computer Network">Computer Network
<option value="Operating System">Operating System
<option value="HTML">HTML
</select>
<p id="sudo"></p>
<script>
function Geeks() {
let x = document.getElementById("GFG").value;
document.getElementById("sudo").innerHTML =
"Selected Subject: " + x;
}
</script>
</body>
</html>
|
Output:Â
Output
Example:Â
In this example, we will see the implementation of onchange tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>onchange event attribute</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
onchange Event Attribute
</h2>
<p>
Select Options:
</p>
<label>
<input type="checkbox" id="option1"
onchange="solve()"> Option 1
</label>
<script>
function solve() {
var selectedOptions = [];
var option1 = document.getElementById("option1");
if (option1.checked) {
selectedOptions.push("Option 1");
}
console.log("Selected Options is:", selectedOptions);
}
</script>
</body>
</html>
|
Output: In the output you can see that on checking the checkbox, onchange event is triggered and this action is added in empty array from javascript.
Output
Supported Browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 9 and above
- Safari 3 and above
Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...