Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

jQuery change() Method

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

Syntax :

$(selector).change(function)

Parameter: It accepts an optional parameter “function”. 

jQuery examples to show the working of change() method: 

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: 

 


My Personal Notes arrow_drop_up
Last Updated : 17 Nov, 2022
Like Article
Save Article
Similar Reads