jQuery change() Method

Last Updated:

jQuery change() Method

The jQuery change() method is used for the following 2 purpose

  1. To run a callback when a specified element is changed.
  2. 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.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
change()YesYesYesYesYesYesYesYesYesYesYesYesYes

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>

Share this Page

Meet the Author