Home » JavaScript » jQuery » jQuery onChange Event Example

About Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.

jQuery onChange Event Example

The aim of this example is to go through the change() method of jQuery. What this method does is, basically, bind an event handler to the “change” JavaScript event, or trigger that event on an element.

The change event occurs when the value of an element has been changed (only works on input, textarea and select elements).

For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

The change() method triggers the change event, or attaches a function to run when a change event occurs.

1. The Basics

THe following basic setup and syntax shall be clear before we go on further.

1.1 Document Setup

To begin, create a new HTML document and add the following basic syntax inside:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery onChange Example</title>
</head>
<body>

<!-- HTML SECTION  -->


<!-- JAVASCRIPT SECTION  -->
<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

</script>

</body>
</html>

The code above assumes you have downloaded and linked jQuery library locally, however, if you haven’t, you can find and download it from the official website here.

1.2 Method Syntax

In order to trigger the change event for the selected elements use the following syntax:
$(selector).change()

In order to attach a function to the change event:
$(selector).change(function)

This method is a shortcut for .on( "change", handler ) or .trigger( "change" ) when applied with no arguments.

2. Application Examples

The following example demonstrate the usage of the method in real-life web projects.

2.1 Example 1

In this first exmaple, let’s see a simple application of the method on an input field. The method will alert a message when the input field is filled with text. To do this, you
need to enter a single line of input in the HTML section:

<!-- HTML SECTION  -->
<input type="text">

Now, in the JS section, we select the input element and apply the change() method which will return an alert.

<!-- JAVASCRIPT SECTION  -->
<script type="text/javascript">
$(document).ready(function(){
    $("input").change(function(){
        alert("The text has been changed.");
    });
});
</script>

change1

2.2 Example 2

This example takes into consideration a form element in which two input types are changed and the change() method responds to each one of them.

<!-- HTML SECTION  -->
<form>
  <input class="target" type="text">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>

Same as above, we’d just give an alert for any change inside the form, which is made of an input field and a select dropdown.

<script type="text/javascript">
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});
</script>

change2

2.3 Example 3

In this last example, let’s consider a case when we attach a change event to the select that gets the text for each selected option and write them in the div. It then triggers the event for the initial text draw.

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>

Now changing and appending the change to the div would be done like so:

$( "select" ).change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  }).change();

change3

3. Conclusion

To conclude, the .change() method of jQuery is a useful way to capture user interaction, especially on input fields, and act accordingly based on what you want to achieve. It is simple to use and adds a lot of functionality when being used to trigger a function. As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.

4. Download

Download
You can download the full source code of this example here: jQuery onChange

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ccheung39
ccheung39
5 years ago

Thanks for this post. It really helped me understand how to make onChange event handlers. I’m still learning, so this functioning example download was excellent!