Small #javascript drop-in to help enforce #save when a user tries to #navigate #away from a page. Relatively naive implementation. See notes at top of file

common-saveEnforcer.js

/*------------------------------------------------------------------------------
    common-enforcesave.js

    Description:
        this provides a fairly simple way to attempt to enforce saving of 
        important data on form pages. Adds "saveEnforcer" to globals. Add the 
        saveButton class to any buttons used for saving, and the inputToCapture 
        class to any inputs that should be saved. Call saveEnforcer.initialise()
        on document ready.

    Dependencies:
        jQuery

    Usage Notes:

        Methods:
            initialise:
                call this on document ready. The function will:
                  - bind to the click event of your saveButton[s], ensuring they
                        won't trigger an unsaved warning.
                  - bind to the keyup, paste, and input events (plus a <ie9
                        propertychange shim) for the inputToCapture class to
                        flag the page as dirty/requiring save when these change

        Classes to use in your page:

            saveButton:
                attach this to a clickable. When clicked, this will set
                the not_saved variable to false, meaning that if this
                navigation button takes you away from the page, you
                won't get a popup as you are signalling to the system
                that this clicky saves any changes

            inputToCapture:
                if any of input events (paste keyup propertychange[<ie9 shim] 
                input) are detected, this will flag to the system that data that
                needs saving has been entered

        Advanced notes:
            You can manage page dirtiness directly with 
            saveEnforcer.data_entered = [true|false]

            Similarly, if you set saveEnforcer.not_saved = [true|false] this
            will signal to saveEnforcer whether you have saved or not, so [e.g.]
            if data_entered = true but not_saved = false, the system will not
            issue a warning.

            This is a relatively naive implementation:
              - This is designed for saving processes that redirect (or reload).
                If yours doesn't, and saving happens using ajax or something,
                you'll need to modify this.
              - Similarly, if say the user cancels page load after hitting save,
                this will think that they have in fact succesfuly saved, unless
                they go ahead and edit something else
------------------------------------------------------------------------------*/

var saveEnforcer = {

    data_entered : false,
    not_saved : true,
    propertyChangeUnbound : false,

    initialise : function() {
        $('.saveButton').on('click', function() {
            saveEnforcer.not_saved = false;
        })

        //Ref http://stackoverflow.com/questions/6488171/catch-only-keypresses-that-change-input/6490241#6490241 for basic template
        // <IE9 propertychange event
        $(".inputToCapture").on("propertychange keyup paste", function(e) {
            if (e.originalEvent.propertyName == "value") {
                if(saveEnforcer.not_saved === false) {
                    saveEnforcer.not_saved = true;
                }
                saveEnforcer.data_entered = true;
            }
        });
        // HTML5 input event
        $(".inputToCapture").on("input keyup paste", function() {
            if (!saveEnforcer.propertyChangeUnbound) {
                $(".inputToCapture").unbind("propertychange");
                saveEnforcer.propertyChangeUnbound = true;
            }
            if(saveEnforcer.not_saved === false) {
                saveEnforcer.not_saved = true;
            }
            saveEnforcer.data_entered = true;
        });

        $(window).bind('beforeunload', function() {
            if (saveEnforcer.not_saved && saveEnforcer.data_entered) {
                return 'You have not saved your changes.';
            }
        }); 
    }
};