Using OnBeforeUnload to stop a Submit

adknbvi · Apr 8, 2005

I have a JS client side function that is carrying out a submit when a user clicks on a hyperlink. strURL will point to the page that the user is being sent to.

function SubmitPage(strURL)
{
document.MyForm.method ="POST";
document.MyForm.action = strURL;
document.MyForm.submit();
}

I am trying to confirm that the user wants to leave the current page without saving his data. I am using the OnBeforeUnload event and the code shown below:

function PromptForExit()
{
if (document.MyForm.hidNeedPrompt.value == "Y")
{
event.returnValue ="WARNING: You are about to navigate away from the current page, which may result in data loss."
}
}

And the Body statement looks like this:

<body topmargin=0 leftmargin=0 onBeforeUnload="PromptForExit()">

The event.returnValue works great if the user chooses OK, but results in an error if the user chooses "Cancel" at the prompt.

The error I receive is "A runtime error has occurred. Do you want to debug? Line: 130, Error: Unspecified Error". This line number corresponds to the line containing "document.MyForm.submit();".

Why is the submit still attempting to go forward even after we have stated that we want to Cancel? I am not familiar with the use of event.returnValue, so any help would be greatly appreciated!

tsdragon · Apr 8, 2005

There is really too much missing for us to tell just what is happening. We can't see what the form tag looks like, we can't see how/where the SubmitPage function is being called, and we can't see the interaction between the two functions.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

adam0101 · Apr 8, 2005

I was able to recreate your problem - and have no idea why it's happening, but a work-around is to trap and ignore the error:

Code:

<script>
function SubmitPage(strURL)
{
    document.MyForm.method ="POST";
    document.MyForm.action = strURL;
    try{
      document.MyForm.submit();
    }catch(e){}
}
function PromptForExit()
{
  if (document.MyForm.hidNeedPrompt.value == "Y")
  {
    event.returnValue ="WARNING: You are about to navigate away from the current page, which may result in data loss."
  }
}
</script>
<body topmargin=0 leftmargin=0 onBeforeUnload="PromptForExit()">
<form name="MyForm">
<input type="hidden" name="hidNeedPrompt" value="Y">
<a href="javascript:SubmitPage('[URL unfurl="true"]http://google.com');">test</a>[/URL]

What's really weird is that I get two confirmation boxes. And when I execute this code without the Try..Catch block, I get the error when I click 'Ok' on the first one and 'Cancel' on the second one. Weird.

Adam

Whatever I feel like I wanna do, gosh!

adam0101 · Apr 8, 2005

Ok, I found out why I was getting two dialog boxes. The first was because the browser thought I was leaving the page when I clicked on the javascript:SubmitPage() link. I changed it to a link that doesn't navigate anywhere and that cleared up that problem.

Code:

<a href="" onclick="SubmitPage('[URL unfurl="true"]http://google.com');return[/URL] false">test</a>

As for the error, it might not be a bad thing. You can add code to the catch block that handles when they click 'Cancel' if you wanted.

Adam

Whatever I feel like I wanna do, gosh!

adknbvi · Apr 8, 2005

Tracy,
Thanks for responding! Here is a set of small pages that will demonstrate the problem. If you create these and put them into a Virt Dir, just browse to Example.asp and click on the text. When the pop-up box is displayed, you can choose Cancel to see the problem.

Thanks again for looking into this!
____________________________
Example.asp
____________________________

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Example 1</title>
<script>
function SubmitPage(strURL)
{
document.MyForm.method ="POST";
document.MyForm.action = strURL;
document.MyForm.submit();
}
function PromptForExit()
{
if (document.MyForm.hidNeedPrompt.value == "Y")
{
event.returnValue ="WARNING: You are about to navigate away from the current page, which may result in data loss."
}
}
</script>
</head>
<body topmargin=0 leftmargin=0 onBeforeUnload="PromptForExit()">
<form name=MyForm>
<p><a onclick='SubmitPage("Example2.asp");'>Click Me to go to Example2.asp</a></p>
<input type=hidden id=hidNeedPrompt value=Y>
<input type=hidden id=hidMyData name=hidMyData value=hello>
</form>
</body>
</html>

____________________________
Example2.asp - this is the page we should go to
when we do the Submit
____________________________

<%@ LANGUAGE = JavaScript%>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Example 2</title>
</head>
<body>
<%
var strMyData = Request.Form("hidMyData");
%>
Made it to the new page - data retrieved from previous page: <%=strMyData%>
</body>
</html>

adknbvi · Apr 8, 2005

Adam,

That did exactly what I needed! Thanks so much!

Valerie

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!

Using OnBeforeUnload to stop a Submit

adknbvi

Programmer

tsdragon

Programmer

adam0101

Programmer

adam0101

Programmer

adknbvi

Programmer

adknbvi

Programmer

Similar threads

Part and Inventory Search

Sponsor