window.onbeforeunload tips and tricks

Question

I'd like to create an onbeforeunload "You have made edits to the page. Stay On This Page, Leave This Page" jQuery plugin.

The plugin will need to:

1. Accept a containing element. $(".editableFieldContainer").beforeUnload()
2. Autodetect changes to not(:hidden) input/textarea/selects.
3. Prompt user to stay on the page if elements within the containing element have changed.
   
   • except if the page was submitted via form.
   • except if the page/user wants to cancel the changes, e.g., a "Cancel" link/button was pressed.

Something like this (but not quite, it is missing some features):

(function(){
    var changed = false;
    $.beforeUnloadCanceled = false;
    $.fn.beforeUnload = function(){
        $.beforeUnloadCanceled = true;
        return $(this).delegate("input,select,textarea", "change", function(){
            changed = true;
        });
    });
    window.onbeforeunload = function(){
        if(changed && !beforeUnloadCanceled){return "You have made edits to the page.";} 
    };
}());

Is there already a decent plugin that does this?

Answer 1

This could be what your looking for.

jquery.wtFormDirty-2.0.2.js