Question

I was reading the answer to this question, but it solve the problem with just a single field, how would I watch all the fields (input, select, radio, etc…) on a form?

This is what I currently have (I’m using delegate, this form injects to the page dynamically):

$('#preferencesBody').delegate('input[type="radio"], select', 'change', function() {
    var key = $(this).attr('data-key');
    var value = $(this).val();

    // How to get the old value, and compare with the current value, if they are different, call saveUserPreferences?

    Preferences.saveUserPreferences(key, value);
});

Thanks.

Answer 1

I’ve rolled my own implementation, using an additional attribute when binding my data, and checking the value against the value of the additional attribute, i.e:

$('#preferencesBody').delegate('input[type="text"]:not(.password)', 'blur', function() {
    var value = $(this).val();
    var currentValue = $(this).attr('data-currentvalue');

    if (value !== currentValue) {
        $(this).attr('data-currentvalue', value);
        Preferences.saveUserPreferences(value);
    }
});