How to track changes made in a HTML page

Question

I found this situation very interesting and I hope it is to you as well. I have an exhaustive data entry page with 50-70 form elements loaded with pre-populated values.

Now on submit, I need to show in the next page, the form elements that are changed. Values such as, Label, Old Value, New Value.

What will be an ideal way of going about this? I am looking for a generic impl since I would want to reuse it many times. My skills in playing with a HTML DOM is very limited but I can find a way if you can guide me with an approach.

Answer 1

You can add attribute to all <input /> to save the original value.

You can easily do that with jQuery:

$("input").each(function() {
    $(this).attr("originalValue", $(this).val()); 
});

And then compare it with the new value when the user hit the Submit button.

Demo: http://jsfiddle.net/uUGrU/14/