Jump to content
xisto Community
Sign in to follow this  
Followers 0
dyknight

Asking Users To Confirm If They Wish To Leave The Page

By dyknight, in General Discussion

Recommended Posts

dyknight    0

dyknight
Posted

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:

<html>....<head>....</head><body>...</body></html>

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

<script language="javascript" type="text/javascript">window.onbeforeunload = askConfirm;function askConfirm(){		return "You have unsaved changes.";		}</script>

so that we get this:

<html><head><script language="javascript" type="text/javascript">window.onbeforeunload = askConfirm;function askConfirm(){		return "You have unsaved changes.";		}</script></head><body></body></html>

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:

<script language="javascript" type="text/javascript">	needToConfirm = false;	window.onbeforeunload = askConfirm;		function askConfirm(){		if (needToConfirm){			return "You have unsaved changes.";			}			}</script>

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.

<form>	<input type="text" onchange="needToConfirm=true"/>	<input type="submit" value="Submit"/></form>

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:

<form onsubmit="needToConfirm=false;">	<input type="text" onchange="needToConfirm=true"/>	<input type="submit" value="Submit" onclick="needToConfirm=false;" /></form>

And we result in the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script language="javascript" type="text/javascript">	needToConfirm = false;	window.onbeforeunload = askConfirm;		function askConfirm(){		if (needToConfirm){			return "You have unsaved changes.";			}			}</script></head><body><form onsubmit="needToConfirm=false;">	<input type="text" onchange="needToConfirm=true"/>	<input type="submit" value="Submit" onclick="needToConfirm=false;" /></form></body></html>

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:

<script language="javascript" type="text/javascript" src="[i]your file name[/i]>

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

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

Share this post

Link to post
Share on other sites

Albus Dumbledore    0

Albus Dumbledore
Posted

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-UPAre you posative you want to leave this page?*sighs**clicks yes* i said i was!!!!hehe

Share this post

Link to post
Share on other sites

SolarX    0

SolarX
Posted

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

Share this post

Link to post
Share on other sites

FirefoxRocks    0

FirefoxRocks
Posted

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.

Share this post

Link to post
Share on other sites

dyknight    0

dyknight
Posted (edited)

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.

Edited by dyknight (see edit history)

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted
Nice work, nice code!Asking Users To Confirm If They Wish To Leave The Page

Thank you for great script. It?s quite easy and simple, but works great! I hope it helps me with my eshop to ask my customers why (if it?s true) they haven?t bought something.

-reply by Mario Herak

 

Share this post

Link to post
Share on other sites

Spurious    0

Spurious
Posted

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

Ive been looking for a non-Javascript code but still not found one. When I first looked at it, it didn't look like js but it does now.

Share this post

Link to post
Share on other sites

mahesh2k    0

mahesh2k
Posted

javasript is too irrational.....i love PHP better but thanks anyways

Javascript is irrational ? ? :lol: How is that ? Javascript and PHP is comparable ? I don't think so.

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted

We could add an AJAX request to the server telling it the user is closing the window, then generate an error response within PHP, and show it in a div in the webpage. But then we are using Javascript anyway... :-s

-reply by TuteC

 

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted

It is not only useful for text fields,For large files to upload, this prompt can be used to prevent the user from cancelling an upload by mistake.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept