Prompting a user that un-saved form data exists when leaving a web page

© copyright 04.Jun.2009 by Paul Bradley filed under JavaScript


This week I had to retro fit a clients web application, so that all the main data entry screens would provide a pop-up message to users, if they tried to navigate away from the current page and that page had unsaved form data. There is a good article on the 4 guys from rolla site, which explains how to use the window.onbeforeunload event to call a function which prompts the user if unsaved form data exits, and cancels the navigation away from the current page.

So I based my script on the code from the 4 guys article, however they demonstrate how to set-up an array of field ID names for the fields you want to check. This would have been too time consuming for me, as the application had over 30 data entry screens, many of which had over 15 fields each. So I wanted to create a function which would loop through all the text input boxes and select combo boxes and add their ID's and starting values to the arrays. I could then add this function to the site wide template and all the forms would be protected.

Below is the function I came up with, which starts off initialising the fieldID and fieldValues arrays, and then loops through all the input controls and select controls adding their ID's to the fieldID array, saving their starting values into the fieldValues array.

var needToConfirm   = true;
var fieldID         = new Array();
var fieldValues     = new Array();
var fieldCounter    = 0;

var items = document.getElementsByTagName("input");
for(var i=0; i < items.length; i++) {
    fieldID[fieldCounter] = items[i].id;
    fieldValues[fieldCounter] = items[i].value;
    fieldCounter++;
}

var items = document.getElementsByTagName("select");
for(var i=0; i < items.length; i++) {
    fieldID[fieldCounter] = items[i].id;
    fieldValues[fieldCounter] = items[i].value;
    fieldCounter++;
}

Below, is the code I used to assign the window.onbeforeunload event to a function called confirmExit which performs the check to see if any field values don't match their starting values, indicating that the form data is not saved and prompting the user to the fact.

window.onbeforeunload = confirmExit;

function confirmExit() {
  if(needToConfirm == true) {
    for(var i=0; i < fieldValues.length; i++) {
      var elem = document.getElementById(fieldID[i]);
      if(elem){
        if (elem.value != fieldValues[i]) {
          return 'You have UNSAVED DATA within this screen.


          If you exit this page your changes will be lost.

          Are you sure you want to exit this page?';
        }
      }
    }
  }
}

 


If you have found this article helpful or useful please consider linking to it, emailing it to friends, or share it with others using social sites like del.icio.us, Stumble Upon or Twitter.

Paul Bradley

About the Author
Paul Bradley is a VB.NET software developer living and working in Cumbria. He has over 20 years programming experience. He also produces e-learning videos at Linux by Example

Other Popular Articles

Categories & Topics

Home · Apache · JavaScript · Perl · PDF · PHP · MySQL · MSSQL · TAR · Ubuntu Linux · Video · Visual Basic

Browse the complete article history, and if you like what you see; consider subscribing to the rss feed.