Question

I am trying to make it so that a warning is displayed when a user has unsaved settings on a page.

So far, I’ve added a JSON object to the page when it is loaded, and from there I’ve grabbed an array of the object keys.

Next up, I need to check if all of the options are the same as the settings specified in the JSON object (I assume I can do this with a loop) every time one of the settings is changed – what I don’t know how to do is, from the array of keys that I have, run a JS function every time an input with one of those names is changed. Any suggestions welcome. Here is what I have so far (There are more than two options, just removed from here to save space).

JSON object –

var front_page_admin_args = {"image_type":"rotate","slideshow_pagination":null};

Making the array of keys –

var keys

try{ // Using Try/Catch as some older browsers do not support 'Object.keys()'
    keys = Object.keys(front_page_admin_args);
}
catch(err){
    var keys = $.map(front_page_admin_args, function(value, key){
        return key;
    });
}

Answer 1

This code runs the given embedded function when any input on the page changes. Inside you can check whether this input is interesting for you.

var watchedKeys = ['email', 'password'];
$('input').change(function(e) {
  if (watchedKeys.indexOf(e.target.name) != -1) {
    alert(e.target.name + " has changed. new value:" + e.target.value);
  }
});