jQuery Event change() Method

The jQuery event change() method is used to bind (or attach) an event handler to the change event, or to trigger the change event on an element.

The change event occurs (or is triggered) when the value of an element is changed. This method is typically used with the following elements:

<input>
<textarea>
<select>

This method either binds a function to the change event or triggers the change event on selected elements, depending on whether a function is passed as an argument.

Syntax

Following is the syntax of the jQuery event change() method −

$(selector).change(function)

Parameters

This method accepts an optional parameter as 'function', which is described below −

function (optional) − The function is to run whenever the change event occurs on the selected elements.

Return Value

This method does not return a value, instead it attaches a change handler to selected elements.

Example 1

The following program demonstrates the usage of the jQuery event change() method −

<html>
    <head>
        <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Write something in below input field and press enter...</p>
    <input type="text" placeholder="Write...">
    <script>
        $('input').change(function(){
            alert("change event occured")
        });
    </script>
</body>
</html>

Output

After the above program is executed, it displays an input field. When the user enters text into this field and then either press enter or clicks outside the field, an alert pop-up message will appear on the browser screen −

When the user inputs something into a field −

Example 2

In this example, we demonstrate the jQuery change() method by attaching an event handler to the change event of a selected textarea field. When a user types something into the text area and then clicks outside of it, the entered text will be displayed immediately next to the textarea field −

<html>
    <head>
        <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Write something in below textarea and click outside the field...</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="Write something..."></textarea><br>
    <span></span>
    <script>
        $('textarea').change(function(){
            let x = document.querySelector('textarea');
            document.querySelector('span').innerHTML = x.value;
        });
    </script>
</body>
</html>

Output

The above program displays a text area field. Whenever the user types something into it and then clicks outside the field, the entered text will be displayed immediately after the field −

Once the user enters something in the "textarea" field −

Example 3

Let's Bind an event handler to the change event for "select" elements using the jQuery event change() method. The change event is triggered when an option is selected from the select field −

<html>
    <head>
        <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Select an option.</p>
    <select name="" id="">
        <option value="">Select language...</option>
        <option value="">JavaScript</option>
        <option value="">TypeScript</option>
        <option value="">Java</option>
        <option value="">Python</option>
    </select>
    <script>
        $('select').change(function(){
            alert("Option has been changed....");
        });
    </script>
</body>
</html>

Output

Once the above program is executed, it displays a select field. When the user selects an option, a change event occurs (before selecting an option) −

Once the user selects an option −

jquery_ref_events.htm

Print Page