How to ask users to confirm when they try to exit a page other than by submitting the form, and they have pending changes in some form fields?
The trick is handling the (on)beforeunload page event, which traps any exiting event including a jump command, a back-forward or other navigation command, a reload, a window close...
The dark side is the onbeforeunload handler is not part of the w3c standard, and up to now it seems to be implemented on IE, FX and NS browsers only. (Actually, it was born as a Microsoft extension.)
Below is a sample i've tested on IE6 and FX1.0.7.
Hope this helps, and feel free to ask, comment, extend, or correct...
Regards. -LV
<html>
<head>
<title>onbeforeunload sample (IE, FX)</title>
<script type="text/javascript">
var UNLOAD_MSG = "You will lose any unsaved changes!";
var IGNORE_UNLOAD = true;
function doBeforeUnload() {
if(IGNORE_UNLOAD) return; // Let the page unload
if(window.event)
window.event.returnValue = UNLOAD_MSG; // IE
else
return UNLOAD_MSG; // FX
}
if(window.body)
window.body.onbeforeunload = doBeforeUnload; // IE
else
window.onbeforeunload = doBeforeUnload; // FX
</script>
<script type="text/javascript">
function SetTxtFocus(txtId) {
var oTxt = document.getElementById(txtId);
oTxt.focus();
oTxt.select();
}
</script>
</head>
<body onload="SetTxtFocus('MyText')">
<form action="">
<p><input type="text" id="MyText" value="Change this to trigger"
onchange="IGNORE_UNLOAD = false"
onkeypress="IGNORE_UNLOAD = false" /></p>
<p><input type="submit" value="Test submit"
onclick="IGNORE_UNLOAD = true" /></p>
<p><a href="http://www.google.com">Test jump</a></p>
</form>
</body>
</html>
vivek_iit> is it [onbeforeunload] submitted to W3C for adoption as a standard?
Well, i don't know specifically about that. What i can tell is the W3C is trying to develop a standard as much independent from specific technology as they can, and there's also side-issues with accessibility. In fact, XHTML strict doesn't allow anything
related to something like a "browser", so not only events like onbeforeunload, but also simple things like the TARGET attribute, because that implies the notion of a browser window. Above XHTML strict there may be more powerful profiles, but i guess W3C experts
are still in the process of working out a "standard" framework from the various vendor specific implementations.
The overall problem with this standardization is rooted into the very history of client-side web development, with early days browsers very different and very forgiving upon the "developer". Anything would be much simpler if they could just start from scratch,
but this is not possible and reasonable after all. That recent past has anyway been a rich source of experience and ideas about what a web standard finally should be. So i guess let's just be patient and trust they are doing a great job, as i indeed believe.
Btw, i guess the widespread attitude amongst programmers in considering client-side programming very simple or even not true programming is the worst side-effect of that past, making it still present...
Actually problem the user has still not exit browser, they link to other pages
in the website but they always receive the message "You will lose any unsaved changes!". So I only want to display a message when user is closing the Browser (Click "X" button).
first of all, sorry for my bad English. I hope you can understand, what I need ;)
I have a ASP.NET Application with one page, where users can setup filter settings. I want to have such a message as described here, but it doesn't work correctly.
If I add "IGNORE_UNLOAD = true" to the 'textChanged'- or 'checkedchanged'-Event I get the error, that thats not found. So I tried a work-around and did it in the vb-part. I have a invisible checkbox in my contentplaceHolder which is checked, when a setting
has changed and unchecked at startup or after saving changes with the buttons. But the problem is, that the javascript-code is executed before the vb-events are...started(?).
I really need your help.
I am using Visual Studio 2005 and IE 7. My application has a masterpage which contains a Form. In my page "filter.aspx" is a ContentPlaceHolder, which contains my controls.
<script type="text/javascript">
var UNLOAD_MSG = "Ungespeicherte Daten gehen verloren!";
var IGNORE_UNLOAD = true;
function doBeforeUnload() {
var vChange = document.getElementById("ctl00_cphInhaltOR_cbChange").checked;
var strIsPostBack = theForm.__EVENTTARGET.value;
var Ergebnis = strIsPostBack.search(/.+bSenden.+/);
if (strIsPostBack.length == 0 || Ergebnis == -1) {
if (vChange) {
I got it on my own!!! I don't know, whether it's the best way, but it works good:
Here is my scriptcode:
<script type="text/javascript">
var UNLOAD_MSG = "Ungespeicherte Daten gehen verloren!";
var IGNORE_UNLOAD = false;
function doBeforeUnload() {
var vChange = document.getElementById("ctl00_cphInhaltOR_hdCheckedChange").value;
var strIsPostBack = theForm.__EVENTTARGET.value;
if (IGNORE_UNLOAD == false)
{
if (strIsPostBack.length == 0) {
if (vChange == "true") {
Very important is that the save-button has the onclientclick-event: OnClientClick="IGNORE_UNLOAD = true"
For all other textboxes and so on I used a HiddenField, which is filled with "true" or "false", depending on the changes:
Protected Sub rbAll_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) Handles rb100Ja.CheckedChanged, rb100Nein.CheckedChanged, _
rbDirektJa.CheckedChanged, rbDirektNein.CheckedChanged
hdCheckedChange.Value = "true"
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
hdCheckedChange.Value = "false"
End Sub
Protected Sub bSpeichern_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bSpeichern.Click
hdCheckedChange.Value = "false"
End Sub
Note: I used "theForm.__EVENTTARGET.value;" in the script, because, when I got a Postback this returns the ID of the control except for the button. So I know whether I have a PostBack or not.
E need to execute this code only when the user will try close the window (browser) and not in other's situations. How can i can change the code to do only what i need?
LudovicoVan
Star
9692 Points
1935 Posts
[JS] Ask confirm to exit page with pending changes (onbeforeunload)
Aug 06, 2006 07:15 PM|LINK
How to ask users to confirm when they try to exit a page other than by submitting the form, and they have pending changes in some form fields?
The trick is handling the (on)beforeunload page event, which traps any exiting event including a jump command, a back-forward or other navigation command, a reload, a window close...
The dark side is the onbeforeunload handler is not part of the w3c standard, and up to now it seems to be implemented on IE, FX and NS browsers only. (Actually, it was born as a Microsoft extension.)
Below is a sample i've tested on IE6 and FX1.0.7.
Hope this helps, and feel free to ask, comment, extend, or correct...
Regards. -LV
<html> <head> <title>onbeforeunload sample (IE, FX)</title> <script type="text/javascript"> var UNLOAD_MSG = "You will lose any unsaved changes!"; var IGNORE_UNLOAD = true; function doBeforeUnload() { if(IGNORE_UNLOAD) return; // Let the page unload if(window.event) window.event.returnValue = UNLOAD_MSG; // IE else return UNLOAD_MSG; // FX } if(window.body) window.body.onbeforeunload = doBeforeUnload; // IE else window.onbeforeunload = doBeforeUnload; // FX </script> <script type="text/javascript"> function SetTxtFocus(txtId) { var oTxt = document.getElementById(txtId); oTxt.focus(); oTxt.select(); } </script> </head> <body onload="SetTxtFocus('MyText')"> <form action=""> <p><input type="text" id="MyText" value="Change this to trigger" onchange="IGNORE_UNLOAD = false" onkeypress="IGNORE_UNLOAD = false" /></p> <p><input type="submit" value="Test submit" onclick="IGNORE_UNLOAD = true" /></p> <p><a href="http://www.google.com">Test jump</a></p> </form> </body> </html>confirm onbeforeunload
vivek_iit
All-Star
17778 Points
3189 Posts
MVP
Re: [JS] How to ask confirm when users try to exit pages with pending changes (onbeforeunload)
Aug 06, 2006 08:07 PM|LINK
Nice..and very helpful..!
But is it submitted to W3C for adoption as a standard?
-Vivek
Communifire: Social Networking and Business Collaboration Platform
wagae
Member
325 Points
67 Posts
Re: [JS] How to ask confirm when users try to exit pages with pending changes (onbeforeunload)
Aug 07, 2006 03:28 AM|LINK
Thank you for this,its much appreciated. [:D]
LudovicoVan
Star
9692 Points
1935 Posts
Re: [JS] How to ask confirm when users try to exit pages with pending changes (onbeforeunload)
Aug 12, 2006 05:38 PM|LINK
vivek_iit> is it [onbeforeunload] submitted to W3C for adoption as a standard?
Well, i don't know specifically about that. What i can tell is the W3C is trying to develop a standard as much independent from specific technology as they can, and there's also side-issues with accessibility. In fact, XHTML strict doesn't allow anything related to something like a "browser", so not only events like onbeforeunload, but also simple things like the TARGET attribute, because that implies the notion of a browser window. Above XHTML strict there may be more powerful profiles, but i guess W3C experts are still in the process of working out a "standard" framework from the various vendor specific implementations.
The overall problem with this standardization is rooted into the very history of client-side web development, with early days browsers very different and very forgiving upon the "developer". Anything would be much simpler if they could just start from scratch, but this is not possible and reasonable after all. That recent past has anyway been a rich source of experience and ideas about what a web standard finally should be. So i guess let's just be patient and trust they are doing a great job, as i indeed believe.
Btw, i guess the widespread attitude amongst programmers in considering client-side programming very simple or even not true programming is the worst side-effect of that past, making it still present...
-LV
vtkiet05
Member
2 Points
1 Post
Re: [JS] Ask confirm to exit page with pending changes (onbeforeunload)
Jul 04, 2007 02:05 AM|LINK
I have the same problem.
Actually problem the user has still not exit browser, they link to other pages
in the website but they always receive the message "You will lose any unsaved changes!". So I only want to display a message when user is closing the Browser (Click "X" button).
Thank in advance.
sameer_khanj...
Contributor
7046 Points
1376 Posts
Re: [JS] Ask confirm to exit page with pending changes (onbeforeunload)
Feb 26, 2008 09:57 AM|LINK
Its Really Good.
sameer.khanjit@gmail.com
View Blog
Click "Mark as Answer" on the post that helped you.
tongnom
Member
152 Points
26 Posts
Re: [JS] Ask confirm to exit page with pending changes (onbeforeunload)
Feb 26, 2008 01:35 PM|LINK
Hi Ludovico
I used the following code for the desired effect:
http://www.codeproject.com/KB/ajax/ajaxdirtypanelextender.aspx?fid=447258&df=90&mpp=25&noise=3&sort=Position&view=Quick
cheers
tongnom
bolle
Member
4 Points
2 Posts
Re: [JS] Ask confirm to exit page with pending changes (onbeforeunload)
Jun 02, 2008 07:40 AM|LINK
Hey,
first of all, sorry for my bad English. I hope you can understand, what I need ;)
I have a ASP.NET Application with one page, where users can setup filter settings. I want to have such a message as described here, but it doesn't work correctly.
If I add "IGNORE_UNLOAD = true" to the 'textChanged'- or 'checkedchanged'-Event I get the error, that thats not found. So I tried a work-around and did it in the vb-part. I have a invisible checkbox in my contentplaceHolder which is checked, when a setting has changed and unchecked at startup or after saving changes with the buttons. But the problem is, that the javascript-code is executed before the vb-events are...started(?).
I really need your help.
I am using Visual Studio 2005 and IE 7. My application has a masterpage which contains a Form. In my page "filter.aspx" is a ContentPlaceHolder, which contains my controls.
Here is my code:
<%@ Page Language="vb" Debug="true" MasterPageFile="MasterPage.master" AutoEventWireup="false" validateRequest="false" Inherits="Projecttasks.filter" Codebehind="filter.aspx.vb" %>
<asp:Content ID="contentOR" runat="server" ContentPlaceHolderID="cphInhaltOR">
<script type="text/javascript">
var UNLOAD_MSG = "Ungespeicherte Daten gehen verloren!";
var IGNORE_UNLOAD = true;
function doBeforeUnload() {
var vChange = document.getElementById("ctl00_cphInhaltOR_cbChange").checked;
var strIsPostBack = theForm.__EVENTTARGET.value;
var Ergebnis = strIsPostBack.search(/.+bSenden.+/);
if (strIsPostBack.length == 0 || Ergebnis == -1) {
if (vChange) {
if(window.event)
window.event.returnValue = UNLOAD_MSG;
else
return UNLOAD_MSG;
};
};
};
if(window.body1)
window.body1.onbeforeunload = doBeforeUnload;
else
window.onbeforeunload = doBeforeUnload;
</script>
<h1 class="anmeldung">
<asp:Label ID="lFilterH" runat="server" Text="Konfiguration des persönlichen Filters"></asp:Label>
<asp:Label ID="lVerantw" runat="server" Text="Name"></asp:Label></h1>
...a lot of tables, asp:Labels, asp:Checkboxes, asp:Textboxes... if you want I can post it
</asp:Content>
And the importants part of my VB-Code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
cbChange.Checked = False
...
End Sub
Protected Sub bSpeichern_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bSpeichern.Click
cbChange.Checked = False
....
End Sub
Protected Sub cbAll_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) Handles cbAS400Nr.CheckedChanged, _
cbAusfKostSt.CheckedChanged, cbBearbArt.CheckedChanged, cbBelKostSt.CheckedChanged, _
cbDauer.CheckedChanged, cbEigNotiz.CheckedChanged, cbIdentNo.CheckedChanged, cbInfo.CheckedChanged, _
cbKostMKb.CheckedChanged, cbKostOKb.CheckedChanged, cbKunde.CheckedChanged, cbNotiz.CheckedChanged, _
cbProjBeschr.CheckedChanged, cbProjLeiter.CheckedChanged, cbProjPlaner.CheckedChanged, cbProjQW.CheckedChanged, _
cbRessourcen.CheckedChanged, cbSpaltBreit.CheckedChanged, cbVertrAuftrNo.CheckedChanged, _
cbZeitraumBis.CheckedChanged, cbZeitraumVon.CheckedChanged
cbChange.Checked = True
End Sub
If it doesn't work this way, please try to give me another option, but I don't really want to use AJAX, because I have no idea how it works.
My error-description I get, when I try it like in the first post:
Compileerror: IGNORE_UNLOAD" is not a member of "ASP.Filter.aspx
Thank you for your help!!!
asp.NET 2.0
bolle
Member
4 Points
2 Posts
Re: [JS] Ask confirm to exit page with pending changes (onbeforeunload)
Jun 02, 2008 12:20 PM|LINK
Yeah,
I got it on my own!!! I don't know, whether it's the best way, but it works good:
Here is my scriptcode:
<script type="text/javascript">
var UNLOAD_MSG = "Ungespeicherte Daten gehen verloren!";
var IGNORE_UNLOAD = false;
function doBeforeUnload() {
var vChange = document.getElementById("ctl00_cphInhaltOR_hdCheckedChange").value;
var strIsPostBack = theForm.__EVENTTARGET.value;
if (IGNORE_UNLOAD == false)
{
if (strIsPostBack.length == 0) {
if (vChange == "true") {
if(window.event)
window.event.returnValue = UNLOAD_MSG;
else
return UNLOAD_MSG;
};
};
}
else
{
document.getElementById("ctl00_cphInhaltOR_hdCheckedChange").checked = false;
};
};
if(window.body1)
window.body1.onbeforeunload = doBeforeUnload;
else
window.onbeforeunload = doBeforeUnload;
</script>
Very important is that the save-button has the onclientclick-event: OnClientClick="IGNORE_UNLOAD = true"
For all other textboxes and so on I used a HiddenField, which is filled with "true" or "false", depending on the changes:
Protected Sub rbAll_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) Handles rb100Ja.CheckedChanged, rb100Nein.CheckedChanged, _
rbDirektJa.CheckedChanged, rbDirektNein.CheckedChanged
hdCheckedChange.Value = "true"
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
hdCheckedChange.Value = "false"
End Sub
Protected Sub bSpeichern_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles bSpeichern.Click
hdCheckedChange.Value = "false"
End Sub
Note: I used "theForm.__EVENTTARGET.value;" in the script, because, when I got a Postback this returns the ID of the control except for the button. So I know whether I have a PostBack or not.
I hope it will help someone else!!!
Greetz from Germany ;-)
asp.NET 2.0 JavaScript
miguzipt
Member
2 Points
1 Post
Re: [JS] Ask confirm to exit page with pending changes (onbeforeunload)
Mar 05, 2009 12:09 PM|LINK
Sorry my english, i hope you undestand.
E need to execute this code only when the user will try close the window (browser) and not in other's situations. How can i can change the code to do only what i need?
Thanks,