It is a common requirement in today’s applications to ask for 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, textareas 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 not that removal of href attribute results in anchors loosing their styles. So do attach your own style to the anchors in 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: , , ,

2 responses to “Prototype based script for notifying users for unsaved changes when leaving a page

  1. You would have to handle onbeforeunload event. Although it may not work for IE but it’s kind of the only solution. Unless of course you use AJAX to transition your pages, in which case you can use frameworks like Dojo or RSH to handle back button.

Leave a Comment:

Your email address will not be published. Required fields are marked *