jQuery change() Method
You are Here:
jQuery change() Method
The jQuery change() method is used for the following 2 purpose
- To run a callback when a specified element is changed.
- To trigger the change event of a specified element.
Run a Callback (When Input Changed)
In the following example, we will run a callback function when a input text is changed.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery change() Method</h1>
<p>Edit the input and focus out.</p>
<input type="text" value="edit this value">
<script>
$(document).ready(function(){
$("input").change(function(){
alert("Input was changed");
});
});
</script>
</body>
</html>
Syntax
$(selector).change(func);
Parameter Values
| Value | Type | Explanation |
|---|---|---|
| func | Optional | Specifies the function to run when the change event occurs for the selected elements. |
Run a Callback (When Select Changed)
In the following example, we will run a callback function when a select option is changed.
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery change() Method</h1>
<p>Choose other brand.</p>
<select>
<option>Honda</option>
<option>Hyundai</option>
<option>BMW</option>
</select>
<script>
$(document).ready(function(){
$("select").change(function(){
alert("select option was changed");
});
});
</script>
</body>
</html>
Trigger a Change Event
In the following example, we will trigger a change event when you click on a button.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery change() Method</h1>
<p>Edit the input and focus out, or click on the button.</p>
<input type="text" value="edit this value">
<button>Trigger Change Event</button>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("Input was changed");
});
$("button").click(function(){
$("input").change();
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
