Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Donate Today!

Do you enjoy these
technical forums?
Donate Today! Click Here

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Event Handling

How to prevent page reloading with a non-submitted form
Posted: 7 Aug 07

The following example page shows how you can test whether a form has been changed, and inform the user if they navigate away without submitting the page (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.

CODE

<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).

Cheers,
Jeff

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close