jQuery on change method Examples
One of the most powerful tools in jQuery is the .on() method. The .on() method is the successor of other (older) methods such .bind(), .delegate(), and .live(). .on() method lets you perform an action pretty much, whenever you require or when a certain condition is met. In this article, I am going to share with you a very easy and simple example that depicts how the on change event in jQuery can really help you. So get ready & follow along.
Short Intro to jQuery .on() method:
The .on() method was introduced in jQuery 1.7, so make sure you are using at least the said version or above in order for the following code to work. So what essentially, the .on() method does is that it attaches event handlers to the currently selected set of elements in the jQuery object. At this point, it is worth mentioning that there are 2 more methods closely assosicated with the .on() method. They are: .off() method and .one() method.
Why use .off() method?
Use it to remove events bound with .on().
Why use .on() method?
Use it to attach an event that runs only once and then removes itself.
I will try to explain the .off() and .on() methods in an another article. Now let’s get back to our awesome mighty on change event.
Examples of jQuery on change:
Let us assume that we have a States dropdown list with some values & the ID of this dropdown is “#states”. What we are going to do here are 3 things. They are:
1. Dynamically alert the value of the option that was selected
2. Write the value to a div with ID “#selected_value”.
3. Write the value to a an input textbox with class “.new_state”.
Here is the full, commented source code (HTML + jQuery):
<html>
<head>
<title>jQuery on change examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<label for="states">States</label>
<select name="states" id="states">
<option value="Texas">Texas</option>
<option value="Alabama">Alabama</option>
<option value="Illinois">Illinois</option>
</select>
<div id="selected_value"></div>
<label for="new_state">New State:</label>
<input type="text" name="new_state" id="new_state" class="new_state">
<script type="text/javascript">
$('#states').on("change", function(){
//Get the selected value
var selected_value = $("#states option:selected").val();
//1. Alert the selected value
alert( selected_value );
//2. Write the selected value to our div
$('#selected_value').html('The new State value is: '+ selected_value);
//3. Write the selected value to our input box with class .new_state
$('.new_state').val(selected_value);
});
</script>
</body>
</html>As you can see, we are doing multiple operations upon a single “change” event using the .on() method in jQuery very easily. This method is very helpful when you are performing similar operations on elements that previously did not exist in the page, when the page was initially loaded, but were later added to the page dynamically. Yes, this means that you can use the .on() method safely on elements that were added to the page using AJAX.
Your Turn!
Do you know of any other ways to use jQuery on change? Feel free to share by commenting below.
That’s great. But, did you know that Chicago is not a state?
March 18, 2013 at 7:24 pm
You are correct. Chicago was included by mistake and it went unnoticed before the article was published. I have updated the value to Illinois. Thank you for the correction. Appreciate it.
Rocky Dev
March 18, 2013 at 11:35 pm
This is really nice and handy. But when I read “states” from a database using PHP, nothing happens. Is there any trick to make it work? Thanks.
July 26, 2013 at 12:10 pm
Yes, there is a way to make this work with database. You will have to use the jQuery AJAX method. Inside it, you will have to serialize the form, send the values to the PHP script (or any other server side language), do your database related stuff and then send back the new values via JSON response. To know more about this, read up on the .ajax method in jQuery website.
Rocky Dev
July 28, 2013 at 1:59 pm