Capture Value Changes using jQuery .change() Method

We often come across situations where we want to capture or detect changes made in a textbox or a dropdown list. I have seen queries in many forums where users, especially beginners, ask about how to detect value changes in a textbox control or a value selected in a <select> element. This post has a solution to these queries. I’ll show you how jQuery .change() method will help you detect or capture any change in an input element.

Syntax of .change() Method

$(selector).change(function)

jQuery .change() Method

Related Post: Capture value changes in JavaScript using onchange attribute

This method triggers the change event when the value inside the element changes. For example, we have an input box on our web page, and attach the jQuery .change() method to it. When a user enters a value and hits the tab key to switch focus on another element, the .change() method senses the change and captures the value. The captured value is then checked, verified etc. Let us see how it actually works.

Get Changed Value from an Input Box

Using $('input') as Selector

Add an Input box inside the <body> tag of your web page. In my first example, I am going to assign value for selector (see the syntax) as $(input).

The Markup
<head>
    <title>jQuery .change() Method example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="t" value="" />
</body>
The Script
<script>
    $(document).ready(function () {
        $('input').change(function () {
            alert(this.value);
        });
    });
</script>
</html>

Try it yourself

Enter some text in the box and click anywhere on the page to shift focus from the input box.



Since there is only one element, the .change() method will detect and alert any changes made inside the lone input box. However, this procedure (using 'input' as selector) may not produce a desired result if we have more than one input element. There is an alternative to this issue, that is using the id as Selector.

Using $('#id') as Selector

To distinguish between values inside many input boxes, it is always advisable to assign an id to every element. Now, if you add more input boxes, each with a unique id, then we can use $('#id') as the Selector to capture the changes made in all the input boxes.

The Markup
<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <p>This example captures any change inside each textbox using the id.</p>

    <p>Name <input type="text" id="name" value="" /></p>
    <p>Country <input type="text" id="country" value="" /></p>
</body>

<script>
    $(document).ready(function () {
        $('#name').change(function () {
            alert($(this).attr('id') + ': ' + $(this).val());
        });
        $('#country').change(function () {
            alert($(this).attr('id') + ': ' + $(this).val());
        });
    });
</script>
</html>
Try it

Get Changed Value from <select> element

We often use the <select> element to add and display multiple values in the form of a drop down list. This element allows users to choose from a predefined list of values. They can choose either a single value or multiple values at a time.

In the above example, (using input box), we have used two different methods to capture the changes in an element. We can apply similar procedures to get the changed or selected values, that is, either using $('#element') as selector or the $('#id') as a selector.

In this example, we have added a <select> element with three different colors, as options, and a <DIV> element. Selecting a value (color) from the list will trigger the .change() method and use the selected color to change the <DIV> elements background color.

The Markup and the Script using $('#id')
<!doctype html>
<html>
<head>
    <title>Get changed value from a SELECT element using jQuery .change() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
    <select id="sel1" style="width:auto;">
        <option>-Select a Value-</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
    </select><br />

    <p id="divElement" style="width:100px;height:100px;"></p>
</body>

<script>
    $(document).ready(function () {
        $('#sel1').change(function () {
            switch (this.value) {
                case "blue": 
                case "green":
                case "yellow":
                    $('#divElement').css('background-color', this.value); break;

                default: $('#divElement').css('background-color', '#FFF'); break;
            }
        });
    });
</script>
</html>
Try it

See this Demo



Get Multiple Select Values on Change

We can choose multiple values using the <select> element. All we have to do is add the “multiple” attribute to the <select> tag.

Select Element with Multiple Selection

The Markup
<!doctype html>
<html>
<head>
    <title>Get Changed Value from Select Element using jQuery .change() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <select id="sel2" multiple style="width:100px">
        <option value="60">60</option>
        <option value="80">80</option>
        <option value="120">120</option>
    </select>
</body>
The Script
<script>
    $(document).ready(function () {
        $('#sel2').change(function () {
            var size = "";

            $("#sel2 option:selected").each(function () {
                size += $(this).val() + " ";
            });

            alert(size);
        });
</script>
</html>
Conclusion

We just saw (with examples), how using the jQuery .change() method you can easily capture changes in elements. I would also suggest you to try this method with other elements, such as a textarea. Definitely, a very useful method, since it allows us capture the values at the client side itself, and perform some validations before submitting the data.

Thanks for reading.

Previous - Clone a Textbox Without its Value Using jQuery .clone() MethodNext - Get the Max and Min Value from XML Attribute using jQuery Ajax



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: