javascript - Checking for changes in a given form before unloadleave page - Stack Overflow

I have forms with about 100 input fields each (textbox, textarea, radio, checkbox, file, etc).
When the user leaves the page I need to know if some field has been modified in order to run an autosave routine.

1.- Set form_has_been_modified when any field change:

var form_has_been_modified = 0;
$("form[id^='my_form']").each(function(){
    $(":input", this).live("change", function() {
        form_has_been_modified = 1;
    });
});

2.- Warn user if some field was changed:

window.onbeforeunload = function (e) {
    if ( ! form_has_been_modified){
        return;
    }

    var message = "This page is asking you to confirm that you want to leave - data you have entered may not be saved.";

    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = message;
    }

    // For Safari
    return message;
};

Questions:

a.- Could this code (part 1) make too much slow the browser's user?

b.- The previous code is working very well. But in textbox/textarea input types the change event only occur when elements loses focus. So for example this code does not protect against reload page actions. There exists another better handler instead change to solve this deficiency?

I have forms with about 100 input fields each (textbox, textarea, radio, checkbox, file, etc).
When the user leaves the page I need to know if some field has been modified in order to run an autosave routine.

1.- Set form_has_been_modified when any field change:

var form_has_been_modified = 0;
$("form[id^='my_form']").each(function(){
    $(":input", this).live("change", function() {
        form_has_been_modified = 1;
    });
});

2.- Warn user if some field was changed:

window.onbeforeunload = function (e) {
    if ( ! form_has_been_modified){
        return;
    }

    var message = "This page is asking you to confirm that you want to leave - data you have entered may not be saved.";

    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = message;
    }

    // For Safari
    return message;
};

Questions:

a.- Could this code (part 1) make too much slow the browser's user?

b.- The previous code is working very well. But in textbox/textarea input types the change event only occur when elements loses focus. So for example this code does not protect against reload page actions. There exists another better handler instead change to solve this deficiency?

• javascript
• jquery
• forms
• events
• onbeforeunload

Share Follow asked Apr 23, 2012 at 20:10 Igor ParraIgor Parra 10.4k1010 gold badges7272 silver badges104104 bronze badges 1

• Checkout this github./acvwilson/dirty_form/wiki plugin – Selvakumar Arumugam Commented Apr 23, 2012 at 20:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

How about this

$('#form').data('serialize',$('#form').serialize());
  // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null;
    // i.e; if form state change show box not.
});

You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. I guess this explain is enough :)

I would use keyup, which might be close enough, although you could get some false positives.

Also, with .on() you can replace your .each() loop with a single call (and .live() had been deprecated in 1.7+ anyway):

$("form[id^='my_form']").on("change keyup", ":input", function() {
     form_has_been_modified = 1;
});

For the first part, you might want to add return false; to break the loop once a changed form field is found ... so you don't bother checking all the rest of the fields unnecessarily. That's assuming, of course, that you only need to know if any field has changed, not a list of all that have been changed. Given that, if field #2 is changed, why take the time to check all remaining 98 fields.