Updated March 27, 2023
Introduction to jQuery change()
jQuery change event takes place whenever an element’s value is altered. The change() event is limited to <input> elements, <textarea> boxes and <select> elements. The jQuery change() method adds these html elements to the event handler method, and executes the event handler function when the change event is activated. The change() method will be triggered instantly whenever the user makes the selection with the mouse for select boxes, checkboxes, and radio buttons. The event will occur when the field misses focus for the other element types. Attach an event handler to the JavaScript change() event, or activate the event on an element.
Syntax:
- It generates a change event for the selected element as shown below :
$(selector).change()- It provides a change event for the selected element by adding function to it as shown below:
$(selector).change (content)This method takes the below parameter as mentioned above :
- Function: This is an optional parameter which stipulates the function to run once the change event occurs for the chosen elements. The return value will be an element with the modification.
The syntax can be written as shown below :
$(selector).change (function(){
//define your code here to execute once the change event is happened.
});Examples to Implement jQuery change() Method
We frequently come through circumstances where we need changes made to a textbox or drop-down list to be identified or detected. The method jQuery change() method will allow you to identify or detect any modification in an input element. The jQuery change event works only when there is a change in an element value. It only operates in fields of form Once the change event occurs, the change() method adds a function to run with it.
Below are the examples of jQuery change() methods:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery change() method</title>
<style>
div {
color: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select id="mytxt" name="list" >
<option>South Africa</option>
<option selected="selected">India</option>
<option>Australia</option>
<option>New Zealand</option>
<option>Srilanka</option>
<option>England</option>
</select>
<div id="mytxt1"></div>
<script>
$( "select" ) .change(function () {
document.getElementById("mytxt1").innerHTML=" The selected element from the list is : "+document.getElementById("mytxt").value;
});
</script>
</body>
</html>Output:
When you run the above code, you will see the selected element name in green color. The element will be selected from the list which uses <select> tag which is associated with ‘id’ of the element and that should be matched in the both <select> tag and <script> element.
The output will be displayed as shown in the below image:
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> jQuery change() method </title>
<style>
div {
color: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select name="list" multiple="multiple">
<option>India</option>
<option selected="selected">South Africa</option>
<option>England</option>
<option selected="selected">New Zealand</option>
<option>Srilanka</option>
<option>Australia</option>
</select>
<div></div>
<script>
$( "select" )
.change(function () {
var str_val = "";
$( "select option:selected" ).each(function() {
str_val += $( this ).text() + " ";
});
$( "div" ).text( str_val );
})
.change();
</script>
</body>
</html>Output:
In the above example, multiple elements can be selected from the list.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> jQuery change() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("textarea").change(function(){
alert(" The value of the text area has been changed ... ");
});
});
</script>
</head>
<body>
<textarea type="text"></textarea>
<p> You can write something in the above text area and click outside of the textarea box. </p>
<p> WHen you click outside the textarea, alert box will be displayed when the value of the textarea changes ...</p>
</body>
</html>Output:
When you load the above code, the below result will get displayed. The below output shows before the text area value changes:
When you type the text in a text area and click outside the text area. This will change the value of the text area and, thus it triggers the change event. The alert box will be displayed on the output and then change event handler function can be set.
Example #4
Code:
<!doctype html>
<html>
<head>
<title> jQuery change() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<select id="txt" style="width:auto;">
<option> Please select the value... </option>
<option value="red"> Red </option>
<option value="orange"> Orange </option>
<option value="green"> Green </option>
</select><br />
<p id="myElement" style="width:150px; height:150px;"></p>
</body>
<script>
$(document).ready(function () {
$('#txt').change(function () {
switch (this.value) {
case "red":
case "orange":
case "green":
$('#myElement').css('background-color', this.value); break;
default: $('#myElement').css('background-color', '#FFF'); break;
}
});
});
</script>
</html>Output:
In the above result, when you select the specific color name from the list, then the respective color will get displayed in the box.
Example #5
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> jQuery change() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p> Please enter the text in the input element and see the entered text in the alert window... </p>
<p> Enter the first name <input type="text" id="fname" value="" /></p>
<p> Enter the last name <input type="text" id="lname" value="" /></p>
</body>
<script>
$(document).ready(function () {
$('#fname').change(function () {
alert($(this).attr('id') + ': ' + $(this).val());
});
$('#lname').change(function () {
alert($(this).attr('id') + ': ' + $(this).val());
});
});
</script>
</html>Output:
When you run the code, you will get the below output.
Enter the text in the text fields as shown below:
Enter the text in the input fields and click the mouse outside the input element and text will be displayed in the alert box.
Conclusion
So far, we have already seen how you can easily capture changes in elements using the jQuery change() method. This is definitely a very helpful method, as it helps us to collect the values on the client-side and to conduct some validations until submitting the information. The jQuery change() method must either execute the change event or incorporate the function to implement when a change occurs. The change event takes place while choosing a menu option. The change event happens when the field loses focus for text fields or text areas once the information has been altered. The jQuery change() method is an alternative of using both on () or trigger () methods with the change event as the first parameter.
Recommended Articles
This is a guide to jQuery change(). Here we discuss the working of jQuery change() Method and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
