How do I know that a form input has changed?

Question

I have a form generated by <% Ajax.BeginForm() {} %> which contains a lot of inputs and texareas.

When an input value change, I need to know about it and mark the input and the form as "dirty". If the user tries to leave the page without saving, I will ask him or her to confirm abandoning changes.

Any suggestion to how this should be done?

Answer 1

Resurrecting this old question because I thought of a simpler/better way. Instead of listening to events on the various inputs, you can serialize the initial form data, store it, and then serialize it again later and check if it's changed, like this:

var originalFormData = $('form#formId').serialize(); function checkFormChanged() {     if(originalFormData !== $('form#formId').serialize()) {         //it's dirty!     } } 

One additional advantage here is that if the user makes a change and then reverts it, this check will report the form as clean.