Welcome to Code Couch

How to prevent page reloading with a non-submitted form

Posted by at 12:12pm on August 7, 2007.

The following example page shows how you can test whether a form has been changed, and inform the user if they navigate away from the page without submitting the form (whilst letting them change their mind and remain on the page).

This technique is suitable for IE6, IE7 and Firefox and relies on the onbeforeunload event to allow the user to change their minds and remain on the page (therefore allowing them to submit the form and not lose data).

Note the onsubmit event being added to the form during the initialisation process – this is to disable the onbeforeunload event from running the preUnload() method when the form is actually submitted.

<html>
<head>
<title>Prevent accidental page reload</title>
<script type="text/javascript">
/* check to see if form field values have changed */
function checkForFormChanges()
{
  var l_oForm = document.getElementById('mainForm');
  var l_pInputs = l_oForm.getElementsByTagName('INPUT');
  for (var loop=0, max=l_pInputs.length; loop<max; loop++)
  {
    if (l_pInputs[loop].defaultValue != l_pInputs[loop].value)
    {
      g_bPreventUnload = true;
      break;
    }
  }
}
 
/* method to run as the page is about to unload */
function preUnload()
{
  checkForFormChanges();
  if (g_bPreventUnload)
  {
    var l_sMessage = "You made changes to the form. ";
    l_sMessage += "If you continue, they will be lost.";
    try
    {
      window.event.returnValue = l_sMessage;
    }
    catch(e)
    {
      // swallow firefox error
    }
    return l_sMessage;
  }
}
 
/* clear onbeforeunload event when the form is sent */
function clearUnload()
{
  if (window.detachEvent)
  {
    window.detachEvent("onbeforeunload", preUnload);
  }
  else
  {
    window.onbeforeunload = null;    
  }
}
 
/* initialise the page, attaching the DOM events */
function init()
{
  window['g_bPreventUnload'] = false;
  if (window.attachEvent)
  {
    window.attachEvent("onbeforeunload", preUnload);
  }
  else
  {
    window.onbeforeunload = preUnload;
  }
  document.getElementById('mainForm').onsubmit = clearUnload;
}
 
window.onload = init;
</script>
</head>
<body>
<form action="" method="get" id="mainForm">
  <fieldset>
    <input type="text" name="reason" value="initial"/>
    <input type="submit" name="submit" value="Send Form"/>
  </fieldset>
</form>
</body>
</html>

If the contents of the form field in the example above is changed and the page is reloaded (or the user tries to visit another URL), a message will show that allows the user to cancel the page being reloaded etc. This will not happen if the form field contents are not changed (nor when the form is submitted).

Post to Twitter

Tags: , ,

Comments

There are no responses to this post.

Leave a reply

Comments are closed for this post.