Alert unsaved data before unloading page

Standard

This post looks to solve the classic problem of navigating away from a unsaved form and loosing all your data. This has caused many end users headaches especially if you have a application with many form pages. This solution uses javascript to alert the user when they are navigating away from a page that has unsaved data. It also has the knowledge to unbind the alert when the user has submitting data to the server.

The Solution:

First we begin by declaring our namespace for the functions are are going to define. I have called it “myApp”. After the document is ready I declare my one and only function “confirmExitIfModified”. This holds all the logic to determine if the form is dirty. This code needs to be included or referenced at the top of your page.

// Declare Namespacing
var myApp = myApp || {};

// Load when document is ready
$(document).ready(function() {

    myApp.confirmExitIfModified = (function() {

        // Determines if a form is dirty by comparing each element to its default value
        function isFormDirty(form) {
            for (var i = 0; i < form.elements.length; i++) {
                var element = form.elements[i];
                var type = element.type;
                if (type === "checkbox" || type === "radio") {
                    if (element.checked !== element.defaultChecked) {
                        return true;
                    }
                }
                else if (type === "hidden" || type === "password" || type === "text" || type === "textarea") {
                    if (element.value !== element.defaultValue) {
                        return true;
                    }
                }
                else if (type === "select-one" || type === "select-multiple") {
                    for (var j = 0; j < element.options.length; j++) {
                        if (element.options[j].selected !== element.options[j].defaultSelected) {
                            return true;
                        }
                    }
                }

            }
            return false;
        }

        return function(message) {

            // Bind to all forms, we do not want to alert when we are submitting
            for (var i = 0; i < document.forms.length; i++) {
                var form = document.forms[i];
                $(form).bind('submit', function() {
                    window.onbeforeunload = null;
                });
            }

            window.onbeforeunload = function(e) {
                e = e || window.event;
                for (var i = 0; i < document.forms.length; i++) {

                    if (isFormDirty(document.forms[i])) {
                        // For IE and Firefox
                        if (e) {
                            e.returnValue = message;
                        }
                        // For Safari
                        return message;
                    }
                }
            };
        };
    })();
});

A critical part of this code is the ability for it to detect when you are submitting data and not navigating. In the return function there is a for loop that iterates through each of the forms. It then binds to that forms submit event using jQuery. When the form is submitted it terminates the function below that calls the onbeforeunload event. Effectively removing the alert from being called.

Usage:

Place this code at the bottom of your page before thetag. You can add your own custom message.

$(document).ready(function() {
   myApp.confirmExitIfModified('You have unsaved changes.');
});

Leave a Reply

Your email address will not be published.