When the document.ready fires, this data gets set (simplified for example purposes):
function getFields() { var s = { "field1" : $("#field1").val(), "field2" : $("#field2").val(), "field3" : $("#field3").val() } return s; } $("#original-fields").data("fields",getFields()); Then, when someone blurs a field, this gets called: function autosave() { $("#new-fields").data("fields",getFields()); var o = $("#original-fields"), n = $("#new-fields"); if (o != n) { // <-- BRICK WALL someAJAXFunctionThatSavesTheFieldsThatChanged(); } } $("input,textarea").blur(function(){ autosave(); }); How can I compare the #original-fields data with the #new-fields data? As it is, the two always differ; I assume this is because they are different objects. I need to quickly and efficiently burn through the two, and compare their data values, returning the field(s) and value(s) that have changed? I am doing it this way because there are some fields that, when they are changed, change other fields. Therefore a simple blur(function(){}) wouldn't quite do it. It would only save THAT field, but not its affected fields.