Warn user they are exiting form

DH · Jun 16, 2004

Here is my scenario:

Prior to form submission, If a user partially fills out a form and decides to visit another link they will loose the data they entered into the form.

I would like to warn a user via a popup/alert that if they leave the current form they will loose the information they have entered so far. I would like to have the popup or alert with 2 button on it. 1.) Okay/Leave Button (okay to leave the form and loose information) 2.)Cancel button (do not want to navigate away from the form. Clicking cancel will let the user finish filling out the form.

Does anyone have any examples of how I can accomplish this?

Thank you,

DH

kaht · Jun 16, 2004

I'm sorry, I'm afraid that just isn't possible for obvious reasons. Imagine you're surfing the web and all of a sudden you hit a page that won't let you navigate away or close your browser window..... With what you're asking a coder could simulate the clicking of the cancel button and make users unable to ever leave their page. However, there are a few steps you can take to remedy this situation. First off, you can warn the user that they are leaving w/o submitting the information. They'll still have to type it when they come back, but the warning will probably ensure they don't do it more than once. Just set a javascript variable as a flag and check it when the page unloads. Use the onsubmit parameter to set the flag equal to true when the page is submitted:

Code:

<script language=JavaScript>

var submitFlag = false;

function validateForm() {
   //do all form validation here
   submitFlag = true;
}

function checkSubmit() {
   if (!submitFlag) {
      alert("Warning, you are leaving the page without submitting any information.\nWhen you come back to this page you will have to re-enter all information");
   }
}

</script>
<body onunload='checkSubmit()'>
<form name=blahForm onsubmit='validateForm()'>
<input type=submit value='submit form'>
</form>
</body>

Secondly (and probably a better solution) would be to use the same method I posted above, but instead of displaying a message, save all the fields to a cookie. When you revisit the page and the cookie exists, use the values from the page to re-fill out the form and then destroy the cookie (so that the form doesn't refill itself EVERY time the user visits the page) There are lots of great tutorials on the web about implementing cookies using javascript. A simple google search should give you plenty of examples.

-kaht

LFI · Jun 16, 2004

Well, a workaround could be to change all your links to link-like things. Make them underlined and blue and, whatever they are, make their onclick property call a function which checks whether the form is partially filled out. Use a confirm-style message to ask if they want to continue or stay (confirm has two buttons: OK and Cancel). If user hits 'OK', then go to preassigned URL, otherwise do nothing.

Here is a small example, sans the form-checking:

Code:

<html>
<head>
<script>
function checkLeaving(theURL)
{
 if(confirm('Are you sure you want to leave?'))
 {
  this.location = theURL;
 }
}
</script>
</head>
<body>
<span onclick='checkLeaving("[URL unfurl="true"]http://www.google.com")'[/URL] onmouseover='this.style.cursor="hand"' style="text-decoration:underline;color:blue">Google</span>
</body>
</html>

Notice the styles of the SPAN are set to mimic a link.

Will that work for you?

--Dave

kaht · Jun 16, 2004

LookingForInfo,

that won't stop the user from:
1) typing a new url in the address bar
2) selecting a link from their favorites menu
3) reloading the page
4) closing the browser window

there really is no realistic solution besides using cookies....

-kaht

LFI · Jun 16, 2004

Yeah, I know all that. DH suggested leaving the site "to visit another link" so I assumed he/she was talking about anchor-links on the page. Obviously, you are correct about it not being a fool-proof method of warning the user about exiting because there are so many ways to exit.

--Dave

DH · Jun 16, 2004

Thanks for your suggestions and I will experiment with your code snippets above. Yes, I was referring to pre-defined anchor links within the website such as a navigation menu, or other link.

Intention is just to warn the user that if they leave the form partially filled out when they return they will have to start all over again. The 2 forms I have in mind contain to many fields to use cookies to save the form data temporarily.

I will post what seems to work best.

Thanks again,

DH

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Warn user they are exiting form

DH

Programmer

kaht

Programmer

LFI

Programmer

kaht

Programmer

LFI

Programmer

DH

Programmer

Similar threads

Part and Inventory Search

Sponsor