I am sure all of us have had the frustration of having to retype an entire email from scratch because we accidentally hit "back" or otherwise left the page. As web technology improves and becomes more profound, such problems have found their simple solutions, as displayed by Google on Gmail, Google Calendars, Google Pages, Blogger etc. This tutorial will explore this script used to prevent a user from leaving the page accidentally.

In order to achieve this, make sure your users have Javascript enabled. We will be using window.onbeforeunload.

Firstly, open up your HTML in your favorite text editor, such as Notepad or Dreamweaver. You will see something like:



Next, paste the following into the script, between the head tags:



so that we get this:



Save the script and test it in your browser. Try navigating away from the page. A popup pane will appear, asking you to confirm your exit and showing the message: "You have unsaved changes.";
Of course, we would like to achieve more than that, such as asking only when the user has made changes to the form.

We will need to do this:



We first set a boolean "needToConfirm" to false, so that we don't ask unless the user has done something, and this something will change needToConfirm to true. Before unload, the function askConfirm will be called. If the boolean "needToConfirm" is true, the function will return a string and there will be a pop-up window. Else, it will return null and the pop-up won't show. Now we need to add something to set needToConfirm to true.



The input field, when changed, will set needToConfirm to true. If unchanged, the boolean will be false. However, we do want to note that when the user has changed and SUBMITTED the form, we do not show the pop-up. So we add the following:



And we result in the final code:



There you go. You might want to save the javascript in an external file and link it, so that you don't have to enter the code on every page. Use the following:

Nice code, but since it requires use of Javascript, it won't work if a user has js disabled.

yeah, ive seen simpler codes than this before, and as jlhaslip said, if they have Javascript disbled, it wont show anything, and sometimes that can just get soo annoying!

*closes page*
POPU-UP
Are you posative you want to leave this page?
*sighs*
*clicks yes* i said i was!!!!

hehe

Hm, I'm using Opera and I don't have such problems, cause Opera saves the text you typed in a form or field automatically. So if you hit back accidentally and forward again nothing is lost.

But it's a good addition four IE users...

If you read the W3Schools page, they do say that JavaScript is the scripting language on the Internet.

Opera and some extensions on the Firefox browser save form fields so they don't get cleared (well on some websites). That won't be a problem for those users.

It is a good addition for IE visitors to your site.

Yup, Javascript is the client-side scripting language of the Internet. What I would do is to add a short notice on the frontpage to warn the user that he should have javascipt enabled. Without Javascipt, site functions and flexibility are pretty limited.

Anyway, for the more experienced, you can add more checks to ensure that you don't pop-up the window unnecessarily. For my example I added a check for submission.

This post has been edited by dyknight: Jul 8 2006, 02:23 AM