Javascript event to know when a user changes something on a form

Question

I have a form which has:

• two input text fields
• 4 selects
• 1 textarea

Is there an easy way to capture the following event?

When a user types inside the input fields, or selects something from the list, or types something inside the text area?

Or do I have to do it the old fashion way like: do a change function for the select, on focus for the input and so on?

Basically, I want to be able to know when something changes on the form.

Any ideas?

Here is an update:

Lets say I use the following code:

$('input, textarea, select').on('change', function() {
    console.log('hey');

    // how do I unbind this certain even after the first "hey" listing of the console?

});

How do I unbind this certain even after the first listing of the console?

Answer 1

To find when an input element changes, we can simply do the following:

$('input').change(function(){
    console.log('Something has changed');
});

That will capture all the events on all the input elements on the page, but in your case we have the following:

• two input text fields
• 4 selects
• 1 textarea

The input selector won't match all of those. However, don't panic! We can still do this. The clever thing is that, in the DOM, all ancestor elements are notified of events that occur on their ancestors. For example, a click on a span inside a div will notify both elements that the click has occurred.

So in this case we just need to find a common ancestor element that contains all these elements, and capture the event on that. The obvious one to use is the form:

$('form').change(function(){
    console.log('Something has changed');
});

However this may not be the best we can do. For instance, it would nice to have a quick way to access the element that was changed. It would also be nice if we could ensure that no other elements could trigger the function. jQuery makes this possible for us with the on function. This allows us to attach the handler to the form element and make sure that the originating element matches a selector, and then gives us a reference to that element as this from inside the function.

This code could look like this:

$('form').on('change', 'input, select, textarea', function() {
    console.log('Something has changed in an element called ' + this.name;
});

---

Your edit suggests you want to be able to disable the handler at some point.

There are two ways to do this. The first is simple and crude:

$('form').off('change');

No more change events will be captured on form. If you want to re-enable it, however, you have to go through the whole rigmarole of re-binding the event handler. The other option is to have a variable that tells you whether the event handler should be enabled or not:

var enabled = true;
$('form').on('change', 'input, select, textarea', function() {
    if (enabled) {
        console.log('Something has changed in an element called ' + this.name;
    }
});

You can then disable the handler by setting enabled to false, and re-enable it by setting it to true again.

Answer 2

You could use:

$('input, textarea, select').on('change', function() {
     alert('something\'s changed!');
});

where 'input' is each of your input elements (or a class name that is shared by the ones that you want to track)