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!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can we take response when click 'BACK' on IE

Status
Not open for further replies.

NewBear

Programmer
Jul 30, 2003
6
HK
When user input something in the form but click 'BACK' on browser accidently. Can html notice that and prompt some confirmation ?
Actually, I haven't see some site like this. Is it work ???

New Bear. ooo
O

 
We can't trap the Back button specifically, but we can look at the onbeforeunload event, which fires whenever the page is about to be unloaded from the window.

The following code is an example of how to do this:
Code:
<html>
<head>
<script type=&quot;text/javascript&quot;>
//This variable tracks whether the user has interacted
//with the form
var hasFormChanged = false;

//This function changes the 'hasFormChanged' variable
//to 'true' - called whenever the user interacts with
//the form.
function setFormChanged(){
 hasFormChanged = true;
}

//This function changes the 'hasFormChanged' variable
//to back to 'false' - called only when the form is being
//submitted, as opposed to the page being unloaded some
//other way.
function setFormOK(obj){
 hasFormChanged = false;
 
 //This bit just resets the action of the form
 //To include the form data - not really important if you
 //use asp or cgi or something.
 obj.action = 'mailto:dwarf_thrower_2002@yahoo.com?' + 
              'subject=' + escape('Yes I Will Buy You Beer') +
			  '&body=' + escape('Name: ' + obj.personName.value + '\n') +
			  escape('Phone: ' + obj.personPhone.value + '\n') +
			  escape('Email: ' + obj.personEmail.value + '\n');               
}

//This function is called on the document's beforeunload
//event. So any time the page is about to be unloaded - 
//Back button, type a new url, close the browser etc - 
//this function will run
function checkFormChanged(){
 if(hasFormChanged){
  msg = 'You are about to leave, you have not yet submitted this form.\nIf you continue your data will not be saved, Do you want to continue?';
  event.returnValue = msg;
 }
}

</script>
</head>
<!-- Here we set the onunload event to trigger our checking
     Function -->
<body onbeforeunload=&quot;checkFormChanged();&quot;>

<!-- Use the onsubmit action to reset the hasFormChanged
     Variable -->
<form action=&quot;mailto:dwarf_thrower_2002@yahoo.com&quot; method=&quot;get&quot; name=&quot;testForm&quot; onsubmit=&quot;setFormOK(this);&quot;>

<!-- For any form element, use the keypress or click 
     events to set the hasFormChanged variable to true -->
Name: <input type=&quot;text&quot; name=&quot;personName&quot; onkeydown=&quot;setFormChanged();&quot; /><br />
Phone Number: <input type=&quot;text&quot; name=&quot;personPhone&quot; onkeydown=&quot;setFormChanged();&quot; /><br />
Email: <input type=&quot;text&quot; name=&quot;personEmail&quot; onkeydown=&quot;setFormChanged();&quot; /><br />
<input name=&quot;submit&quot; type=&quot;submit&quot; value=&quot;Submit&quot;>
</form>
</body>
</html>
 
Thanks, it's seems quite good.

ooo
O New Bear
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top