Skip to content
Related Articles

Related Articles

jQuery change() Method

Improve Article
Save Article
  • Last Updated : 17 Nov, 2022
Improve Article
Save 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
Related Articles

Start Your Coding Journey Now!