Back to: jQuery Tutorials
jQuery Change Event with Examples
In this article, I am going to discuss the jQuery Change Event with Examples. Please read our previous article, where we discussed the Difference Between jQuery Each and Map Method. At the end of this article, you will understand everything about the jQuery Change Event.
jQuery Change Event
If you want to trigger any change in your input fields and want to perform any task when the input field changes then jQuery has a method called change(). The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements). The change() method triggers the change event or attaches a function to run when a change event occurs.
- For select menus, the change event occurs when an option is selected.
- For text fields or text areas, the change event occurs when the field loses focus after the content has been changed.
- For radio and checkboxes, the change event occurs when any of the radio or checkbox is selected.
Syntax:
Parameters:
Function: Specifies the function to run when the change event occurs for the selected elements. When you want to manually trigger the change event you can use the following syntax
$(selector).change()
Example: jQuery Change Event
We will see an example of a select element first.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
section {
background-color: #d1cfcf;
width: 80%;
height: auto;
padding: 10px;
font-size: 20px;
font-weight: 200;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
margin-bottom: 20px;
margin: auto;
}
.demo {
display: block;
padding: 8px 20px;
border-radius: 30px;
font-size: 18px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid black;
outline: none;
transition: 3ms;
}
.demo:hover {
background-color: #ddd;
cursor: pointer;
}
fieldset {
padding: 15px;
margin: 10px;
font-size: 16px;
}
select option {
margin: 5px;
}
select {
padding: 5px;
width: 250px;
margin-left: 5px;
font-size: 14px;
height: auto;
}
</style>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Select the position you want to apply</legend>
<select name="position" class="position">
<option value="webDeveloper">Web Developer</option>
<option value="webDesigner">Web Designer</option>
<option value="graphicDesigner">Graphic Designer</option>
<option value="businessAnalyst">Business Analyst</option>
<option value="telecaller">Telecaller Executive</option>
</select>
</form>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".position").change(function () {
alert($(this).val());
});
});
</script>
</body>
</html>
Now run the above code and you will get the below output.
Notice that whenever you select any of the options from the drop-down list, then that option value will be alerted as shown in the below image.
Let’s see when there are multiple attributes are present. In the below example, for each selected option we are appending the option value whenever any option gets selected to the empty string and showing that in the result div.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
section {
background-color: #d1cfcf;
width: 80%;
height: auto;
padding: 10px;
font-size: 20px;
font-weight: 200;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
margin-bottom: 20px;
margin: auto;
}
.demo {
display: block;
padding: 8px 20px;
border-radius: 30px;
font-size: 18px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid black;
outline: none;
transition: 3ms;
}
.demo:hover {
background-color: #ddd;
cursor: pointer;
}
fieldset {
padding: 15px;
margin: 10px;
font-size: 16px;
}
div {
display: block;
font-size: 20px;
margin: 35px;
padding: 10px;
}
select option {
margin: 5px;
}
select {
padding: 5px;
width: 250px;
margin-left: 5px;
font-size: 14px;
height: auto;
}
</style>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Select the position you want to apply</legend>
<select name="position" class="position" multiple>
<option value="webDeveloper">Web Developer</option>
<option value="webDesigner">Web Designer</option>
<option value="graphicDesigner">Graphic Designer</option>
<option value="businessAnalyst">Business Analyst</option>
<option value="telecaller">Telecaller Executive</option>
</select>
<div class="result"></div>
</form>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div.result" ).text( str );
})
});
</script>
</body>
</html>
Now run the above code and select multiple options as shown in the below image.
Example:
Now let’s see for the <input> elements. In the below example, we are targeting all input elements which are triggering the change event. You type something on the name or email field and when you will lose focus from those you will see the value in the alert. Similarly, for the radio and checkboxes, as soon as you check any option, the value will be alerted
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
section {
background-color: #d1cfcf;
width: 80%;
height: auto;
padding: 10px;
font-size: 20px;
font-weight: 200;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
margin-bottom: 20px;
margin: auto;
}
.demo {
display: block;
padding: 8px 20px;
border-radius: 30px;
font-size: 18px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid black;
outline: none;
transition: 3ms;
}
.demo:hover {
background-color: #ddd;
cursor: pointer;
}
div {
display: block;
font-size: 20px;
margin: 35px;
padding: 10px;
}
input {
display: block;
width: 80%;
border-radius: 30px;
padding: 10px;
font-size: 14px;
margin-bottom: 10px;
outline: none;
border: none;
}
fieldset {
padding: 15px;
margin: 10px;
font-size: 16px;
}
select option {
margin: 5px;
}
select {
padding: 5px;
width: 250px;
margin-left: 5px;
font-size: 14px;
height: auto;
}
</style>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Name:</legend>
<input type="text" name="Name" placeholder="Enter Your Name" />
</fieldset>
<fieldset>
<legend>Email:</legend>
<input type="email" name="Email" placeholder="Enter Your Email" />
</fieldset>
<fieldset>
<legend>Skillset:</legend>
<label for="HTML">HTML5</label>
<input type="checkbox" name="skillset" value="HTML" />
<label for="CSS">CSS3</label>
<input type="checkbox" name="skillset" value="CSS" />
<label for="JavaScript">JavaScript</label>
<input type="checkbox" name="skillset" value="JavaScript" />
<label for="jquery">jQuery</label>
<input type="checkbox" name="skillset" value="jquery" />
</fieldset>
<fieldset>
<legend>Select Your Gender</legend>
<label
>Male: <input type="radio" name="radiogroup" value="Male"
/></label>
<label
>Female: <input type="radio" name="radiogroup" value="Female"
/></label>
</fieldset>
<div class="result"></div>
</form>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input").change(function () {
value = $(this).val();
alert(value);
});
});
</script>
</body>
</html>
jQuery Change Event Real-Time Example:
Now let’s have a look at an example, where all input selects and textarea will be present. In the below example, we are targeting all input fields by “:input” selector. We know that :input is going to target all the input fields including select and textarea. We are triggering the change on the input fields and getting the values whenever the inputs are changing and are appending the result to the div result
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section>
<form action="/">
<fieldset>
<legend>Name:</legend>
<input type="text" name="Name" placeholder="Enter Your Name" />
</fieldset>
<fieldset>
<legend>Email:</legend>
<input type="email" name="Email" placeholder="Enter Your Email" />
</fieldset>
<fieldset>
<legend>Skillset:</legend>
<label for="HTML">HTML5</label>
<input type="checkbox" name="skillset" value="HTML" />
<label for="CSS">CSS3</label>
<input type="checkbox" name="skillset" value="CSS" />
<label for="JavaScript">JavaScript</label>
<input type="checkbox" name="skillset" value="JavaScript" />
<label for="jquery">jQuery</label>
<input type="checkbox" name="skillset" value="jquery" />
</fieldset>
<fieldset>
<legend>Select Your Gender</legend>
<label
>Male: <input type="radio" name="radiogroup" value="Male"
/></label>
<label
>Female: <input type="radio" name="radiogroup" value="Female"
/></label>
</fieldset>
<fieldset>
<legend>Select the position you want to apply</legend>
<select name="position" class="position" multiple>
<option value="webDeveloper">Web Developer</option>
<option value="webDesigner">Web Designer</option>
<option value="graphicDesigner">Graphic Designer</option>
<option value="businessAnalyst">Business Analyst</option>
<option value="telecaller">Telecaller Executive</option>
</select>
<fieldset>
<legend>Any other comments</legend>
<textarea name="textarea" rows="3" cols="20"></textarea>
</fieldset>
<div class="result"></div>
</form>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var values= "";
$(":input").change(function () {
if (values == ""){
values = $(this).val();
}
else{
values +=" ,"+ $(this).val();
}
$('.result').html(values);
})
});
</script>
</body>
</html>
Now run the above code and fill-up the form with input values and check box values. Immediately you will see the selected and input values as shown in the below image.
In the next article, I am going to discuss jQuery Mouse Events with Examples. Here, in this article, I try to explain jQuery Change Event with Examples and I hope you enjoy this jQuery Change Event article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.