How to use change() Method in jQuery

This article describe about change() Method in jQuery.
  • 1690

jQuery Event change() Method

It is only work on the text fields, text areas and selected elements. This event occur when the value of an element is changed.

The change() specifies a function to run when a change event occurs.

Note: In the drop down menu change event occurs when an option is selected for text fields or text areas, and also change event occurs when the field loses focus.

Example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $(".field").change(function () {

            $(this).css("background-color", "yellow");

        });

    });

</script>

</head>

<body>

<p>When a field has been changed, it will change background color.</p>

Enter name: <input class="field" type="text" />

<p>bike:

<select class="field" name="bike">

<option value="honda">honda</option>

<option value="bajaj">bajaj</option>

<option value="hero">hero</option>

<option value="rajdoot">rajdoot</option>

</select>

</p>

</body>

</html>

 

Output

change event pic5.jpg

Trigger the change Event

For selected element trigger generate.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input").change(function () {

            $(this).css("background-color", "yellow");

        });

        $("button").click(function () {

            $("input").change();

        });

    });

</script>

</head>

<body>

<button>Change event trigger for input field</button>

<p>Enter name: <input type="text" /></p>

</body>

</html>

 

Output

change event trigger pic6.jpg

Bind a Function to the change Event

It is specifies the function to run when change event occur.

Syntax

$(selector).change(function)

 

Parameter Description
function Optional. It specifies the function run when change event occur.

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.