Open In App

jQuery change() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery change() is an inbuilt method that is used to detect the change in the value of input fields. This method works only on the “<input>, <textarea> and <select>” elements. 

Syntax:

$(selector).change(function)

Parameters:

It accepts an optional parameter “function”. 

Example 1: In the below code, no function is passed to the change method. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
 
    <!--Demo of change method without passing function-->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("input").change();
            });
        });
    </script>
</head>
 
<body>
    <p>Click the button to see the changed value !!!</p>
    <!--click on this button and see the change -->
    <button>Click Me!</button>
    <p>Enter value:
        <input value="GeeksforGeeks"
               onchange="alert(this.value)"
               type="text">
    </p>
</body>
 
</html>


Output: 

Example 2: In the below code, function is passed to the change method. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
 
    <!--Here function is passed to the change method-->
    <script>
        $(document).ready(function () {
            $(".field").change(function () {
                $(this).css("background-color", "#7FFF00");
            });
        });
    </script>
 
    <style>
        .field {
            padding: 5px;
        }
    </style>
</head>
 
<body>
    <!--write something and click outside -->
    Enter Value:
    <input class="field" type="text">
    <p>
        Write something in the input field, and then
        press enter or click outside the field.
    </p>
</body>
 
</html>


Output: 



Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads