onbeforeunload Demo 3

This demo illustrates how to use two JavaScript arrays to hold the IDs and values of the form field entries, so that the user is shown the confirmation dialog box only when exiting the page after they have made changes to the form field entries.

Here are some links you can click to leave this page. Note that if you are visiting with Internet Explorer or FireFox 0.9 or higher, you'll be asked if you really want to leave this page. This also works when closing the browser.

Notice that if you do not change any of these values, and attempt to leave the page, you can leave without having to see the confirmation dialog box. If, however, you make a change to one of these values, navigating to another page (or closing the browser) will prompt you to see if you really want to leave without saving).
What is your name:
What is your gender?
Send me your newsletter!
What is your favorite type of ice cream?
Vanilla
Chocolate
Strawberry


Source Code

<script language="JavaScript">
  var ids = new Array('name', 'gender', 'sendEmail', 'radVanilla', 'radChocolate', 'radStrawberry');
  var values = new Array('', '', '', '', '', '');
  
  function populateArrays()
  {
    // assign the default values to the items in the values array
    for (var i = 0; i < ids.length; i++)
    {
      var elem = document.getElementById(ids[i]);
      if (elem)
        if (elem.type == 'checkbox' || elem.type == 'radio')
          values[i] = elem.checked;
        else
          values[i] = elem.value;
    }      
  }



  var needToConfirm = true;
  
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
    {
      // check to see if any changes to the data entry fields have been made
      for (var i = 0; i < values.length; i++)
      {
        var elem = document.getElementById(ids[i]);
        if (elem)
          if ((elem.type == 'checkbox' || elem.type == 'radio')
                  && values[i] != elem.checked)
            return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
          else if (!(elem.type == 'checkbox' || elem.type == 'radio') &&
                  elem.value != values[i])
            return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
      }

      // no changes - return nothing      
    }
  }
</script>

...

<form ...>
  <b>What is your name:</b> <input type="text" id="name" name="name" /><br />
  <b>What is your gender?</b>
  <select id="gender" name="gender">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select><br />
  
  <input type="checkbox" name="sendEmail" id="sendEmail" /> <b>Send me your newsletter!</b>
  <br />
  <b>What is your favorite type of ice cream?</b><br />
  <input type="radio" id="radVanilla" name="iceCream" checked="checked" /> Vanilla<br />
  <input type="radio" id="radChocolate" name="iceCream" /> Chocolate<br />
  <input type="radio" id="radStrawberry" name="iceCream" /> Strawberry<br />
  <p>
  <input type="Submit" value="Save" onclick="needToConfirm = false;" />
</form>

<script language="JavaScript">
  populateArrays();
</script>


Return to the article...