jQuery Change Event

Friday, June 15, 2012

The jQuery event change() method is triggered when the value of an element is changed. This method works on text fields, text areas and select elements. The change() method triggers the change event, or can specify a function to run when a change event occurs. For select elements, the change event is triggered when an option is selected from the dropdown list. For text fields and text areas, the change event is triggered when the field loses focus.


Syntax

$(selector).change()
$(selector).change(function)


ParameterDescription
functionOptional. Function to run when the event occurs


Example


$("input").change(function () {
    $(this).css("background-color", "#999999");
     });


In the jQuery code listed above, the change() method specifies that a function should run when the change event occurs. In the example below, the input element's background-color property will be changed when a user types in text and then moves to the next element. As each element loses it focus, the background-color is applied. Try it yourself, by clicking in the input element, type in some text, and click the TAB key or use your mouse to click on another input element.


First Name
Last Name
Department

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor Pro jQuery