INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
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
- Automated Signatures
On Your Posts
- Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Partner With Us!
"Best Of Breed" Forums Add Stickiness To Your Site
(Download This Button Today!)
"...If I'd only had resource like eng-tips when I was just getting started! I might have dazzled them with my brilliance instead of my BS..."
Where in the world do Tek-Tips members come from?
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.
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).
<title>Prevent accidental page reload</title>
/* check to see if form field values have changed */
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 */
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
/* clear onbeforeunload event when the form is sent */
window.onbeforeunload = null;
/* initialise the page, attaching the DOM events */
window['g_bPreventUnload'] = false;
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"/>
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:
- Talk To Other Members
- Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close