Prototype-based script for notifying users of unsaved changes when leaving a page

4 min read >

Prototype-based script for notifying users of unsaved changes when leaving a page

Engineering Insights & Enterprise solutions

It is a common requirement in today’s applications to ask for a user’s confirmation when leaving a page – if changes were made in the page. I’ve written this simple prototype-based script for checking for modifications. If one does not make any changes to the page – it can leave the page without being asked for confirmation. However, if any change has been made, the user will be asked whether changes will be discarded or not.

The best thing about this script is that it can be applied non-intrusively to any HTML page. No changes to the input fields in the page are required. All you have to do is add the following code to initialize the tracking for changes:

<script>// 
<![CDATA[ Event.observe(window, "load", function() { initCheckingForModifications(); }); // ]]>
</script>

The mechanism is simple: track any changes in input fields, text areas, or select boxes. Also, monitor every anchor in the page and intercept the onclick event, attaching our own verification before following the URL/javascript in that anchor.

Anchors (a-s) are tracked by removing the href attribute and attaching a handler for the onclick event. This is a very simple method for intercepting clicks on anchors avoiding headaches. Please note that removal of the href attribute results in anchors losing their styles. So do attach your own style to the anchors on the page.

Since requirements can go a long way, this could also serve as a starter for more complex checks.

Following you can find the two files involved: test.htm and checkModifications.js. Here is test.html:

<script src="”js/prototype.js”" type="”text/javascript”">
</script>
<script src="”checkModifications.js”" type="”text/javascript”">
</script>

 

 

alert

and checkModifications.js

var mustConfirmLeave = false;
function initCheckingForModifications() {
    //var elems = $(formId).elements;
    var inputs = document.getElementsByTagName(”input”);
    for(var i = 0; i &lt; inputs.length; i++) {
        var type = inputs[i].getAttribute(”type”);
        if(type == “checkbox” || type == “radio”) {
            Event.observe(inputs[i], “change”, somethingHasChanged);
        } else {
            Event.observe(inputs[i], “keypress”, somethingHasChanged);
        }
    }
    var textareas = document.getElementsByTagName(”textarea”);
    for(var i = 0; i &lt; textareas.length; i++) {
        Event.observe(textareas[i], “keypress”, somethingHasChanged);
    }
    var selects = document.getElementsByTagName(”select”);
    for(var i = 0; i &lt; selects.length; i++) {
        Event.observe(selects[i], “change”, somethingHasChanged);
    }
   
    // for all a-s - intercept onclick
    var as = document.getElementsByTagName(”a”);
    for(var i = 0; i &lt; as.length; i++) {
        var href = as[i].getAttribute(”href”);
        as[i]._href = href;
        as[i].removeAttribute(”href”);
        Event.observe(as[i], “click”, navigateAway.bindAsEventListener(as[i]));
    }
}

function somethingHasChanged(e) {
    if (e.keyCode != Event.KEY_TAB) {
        mustConfirmLeave = true;
    }
}

function navigateAway(url) {
    if(checkForModifications()) {
        window.location.href = this._href;//url;
    }
}

function checkForModifications() {
    if(mustConfirmLeave) {
        if(confirm(”You’ve made changes in the page. Are you sure you want to leave this page without saving the changes?”)) {
            return true;
        } else {
            return false;
        }                           
    }
    return true;
}

Blogged with Flock

Tags: javascript, prototype, unsaved changes, confirmation