TechStop: Asking Users To Confirm If They Wish To Leave The Page

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:

CODE

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

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

CODE

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

so that we get this:

CODE

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

CODE

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

CODE

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

CODE

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

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta 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:

CODE

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

For Example : 

Try to close this window..

Try to Navigate Away From This Page..

TechStop

Flipkart

Friday, 17 February 2012

Asking Users To Confirm If They Wish To Leave The Page

CODE

CODE

CODE

CODE

CODE

CODE

CODE

CODE

For Example :

No comments:

Post a Comment