Question

Basically the same functionality as stackoverflow when posting a question, if you start writing a post then try to reload the page. You get a javascript alert box warning message.

I understand how to check if the form has been changed, although how do I do the next step.

I.E: How to I check this when leaving the page, on here you get “This page is asking you to confirm that you want to leave – data you have entered may not be saved.”?

EDIT: found correct answer here to another question https://stackoverflow.com/a/2366024/560287

Answer 1

I’m very sure that if you search, ‘jQuery detect form change plugin’, you will find something much more usable than this semi-pseudo code i’m about to write:

formChanged = function(form) {
    form.find('input[type="text"], textarea').each(function(elem) {
        if (elem.defaultValue != elem.value) {
            return true;
        }
    });
    // repeat for checkbox/radio: .defaultChecked
    // repeat for ddl/listbox: .defaultSelected
    return false;
}

usage:

if (formChanged($('form')) { // do something }

Note that this is to detect changes against the original rendered value. For instance, if a textbox has a value = “x”, and the user changes it to “y”, then changes it back to “x”; this will detect it as NO change.

If you do not care about this scenario, you can just do this:

window.formChanged = false;

$(':input').change(function() {
    window.formChanged = true;
});

Then you can just check that value.