Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • 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!
  • Students Click Here

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

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Event Handling

How to prevent page reloading with a non-submitted form by BabyJeffy
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.


<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;

/* method to run as the page is about to unload */
function preUnload()
  if (g_bPreventUnload)
    var l_sMessage = "You made changes to the form. ";
    l_sMessage += "If you continue, they will be lost.";
      window.event.returnValue = l_sMessage;
      // swallow firefox error
    return l_sMessage;

/* clear onbeforeunload event when the form is sent */
function clearUnload()
  if (window.detachEvent)
    window.detachEvent("onbeforeunload", preUnload);
    window.onbeforeunload = null;    

/* initialise the page, attaching the DOM events */
function init()
  window['g_bPreventUnload'] = false;
  if (window.attachEvent)
    window.attachEvent("onbeforeunload", preUnload);
    window.onbeforeunload = preUnload;
  document.getElementById('mainForm').onsubmit = clearUnload;

window.onload = init;
<form action="" method="get" id="mainForm">
    <input type="text" name="reason" value="initial"/>
    <input type="submit" name="submit" value="Send Form"/>
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).


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