Getting ready

Once more, create a new blank HTML document named recipe-3.html. Ensure that you have the latest version of jQuery downloaded, which can be included into this HTML file.

How to do it…

To learn how to attach change event handlers to various element types, perform the following steps:

How it works…

Selecting each input element using $() and then using the .change() function to attach a change event handler allows us to specify the code to be executed once the user has changed the value of each input.

Within the callback function, which is provided to the .change() function as an argument, we can get the new value. Using this, which refers to the selected element, we can use $(this).val() to retrieve the newly chosen value and display it within an alert.

If you open the web page within a browser and change the selected input value to Allyce, an alert will be displayed similar to the one shown in the following screenshot:

This is done using .val() to return the value="Allyce" property on the selected option in the drop-down input which has the change event handler attached.

When using the .change() event handler on a text input, this change event will not be fired until the input box has lost focus, that is, the user has clicked on another part of the web page. As it is often desirable to detect an immediate change, you should consider using a key press event to catch these changes instead.

There's more...

The Detecting button clicks recipe discussed the benefits of using the .on() method over using .click(). These benefits also apply in this situation as the .on() method can also be used with the change event. Consider the following code:

$('body').on("change", "#names", function(){
  var newValue = $(this).val();
  alert("Input value changed to: " + newValue);
});

See also