Prototype based script for notifying users for unsaved changes when leaving a page
October 3rd, 2007 by 
Marius Hanganu
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:
1 2 3 4 5 | <script> 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.htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <html> <head> <script type=”text/javascript” src=”js/prototype.js”></script> <script type=”text/javascript” src=”checkModifications.js”></script> </head> <body> <form id=”testForm” method=”get” action=”http://www.yahoo.com” onsubmit=”return checkForModifications()”> <div> <label>First Name:</label> <input type=”text” name=”first”/> </div> <div> <label>Last Name:</label> <input type=”text” name=”last”/> </div> <div> <label>Company:</label> <input type=”text” name=”company”/> </div> <div> <label>Email:</label> <input type=”text” name=”email”/> </div> <div class=”x-form-item”> <label>Role:</label> <select> <option>Role1</option> <option>Role2</option> <option>Role3</option> </select> </div> <div class=”x-form-item”> <label>Dental:</label> <input type=”checkbox” onchange=”alert(’test’)”> </div> <input type=”submit”/> </form> <br/> <a href=”http://www.yahoo.com” style=”color:blue;text-decoration:underline;cursor:pointer;”>yahoo</a> <br/> <a href=”javascript:alert(1)” style=”color:blue;text-decoration:underline;cursor:pointer;”>alert</a> <script> Event.observe(window, “load”, function() { initCheckingForModifications(); }); </script> </body> </html> |
and checkModifications.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | var mustConfirmLeave = false; function initCheckingForModifications() { //var elems = $(formId).elements; var inputs = document.getElementsByTagName(”input”); for(var i = 0; i < 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 < textareas.length; i++) { Event.observe(textareas[i], “keypress”, somethingHasChanged); } var selects = document.getElementsByTagName(”select”); for(var i = 0; i < 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 < 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, cofirmation
Posted in HTML, Javascript | 
2 Comments »