When Leaving Page, Prompt The User That Changes Have Not Been Saved

I’m in the process of create a few input forms in ASP.NET (Name, address, and etc). If the user makes a change to the page and tries to navigate away from the current page without previously clicking save, the current page should prompt the user that there are changes to the page and does the user want to continue to navigate to a different page. The prompt should be triggered by any of the following: selecting a link, closing the window, entering a new URL in the address bar, selecting back, hitting refresh or other means.

To solve this problem I first tried using onunload, but could not find any way of stopping the user from going to another page.

[sourcecode language=”xml”]
body onunload=”ConfirmExit”
[/sourcecode]

After a little research I found a method window.onbeforeunload. window.onbeforeunload provides the developer a way to notify the user that there has been changes that have not been save before navigating to a different page. In the following example I use ASP.NET instead of strait HTML. The code behind loops through every webcontrol that’s in the form and wires up the control’s onchange JavaScript event to call InputChange function. If the user changes any of the controls the isDirty variable is set to true.

As you can see in the following code the window.onbeforunload is set to ConfirmExit function. This is the part that is used to notifies the user. Any time the user tries to exit the page the ConfirmExit function will be called. In the ConfirmExit function, if the isDirty variable is true, the user should be prompted with a message to confirm if they want to leave the page. If isDirty is false the the user is redirect without a prompt.

If the user clicks save button, I do no not want him to be prompted that the data has not been save. So I set the following for the button control.

[sourcecode language=”javascript”]
OnClientClick=”isDirty=false”
[/sourcecode]

I tested the following code and confirm it works in IE7 and FireFox 2.0

[sourcecode language=”csharp”]
public partial class TestPromptSave : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false) {
SetupJSdataChange(form1);
}
}

private void SetupJSdataChange(Control parentControl) {
foreach (Control control in parentControl.Controls) {
//Response.Write(control.ID + “<br>”);
if (control is WebControl) {
WebControl webControl = control as WebControl;
webControl.Attributes.Add(“onchange”, “InputChanged(this)”);
}
}
}
protected void Page_Save(object sender, EventArgs e) {
}
}
[/sourcecode]

HEre some more

[sourcecode language=”xml”]
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”TestPromptSave.aspx.cs” Inherits=”TestPromptSave” %>
<!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 runat=”server”>
<title>Untitled Page</title>
</head>
<body >
<script type=”text/javascript” language=”javascript”>
var isDirty = false;
window.onbeforeunload = ConfirmExit;

function InputChanged(control)
{
isDirty = true;
}
function ConfirmExit()
{
if(isDirty == true){
return “You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?”;
}
}

</script>

<form id=”form1? runat=”server” >
<a href=”RedirectPage.aspx”>RedirectPage.aspx</a>
<br /><br />
<table>
<tr>
<td>
First Name
</td>
<td>
<asp:TextBox ID=”txtFirstname” runat=”server” />
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<asp:TextBox ID=”txtLastName” runat=”server” />
</td>
</tr>
<tr>
<td>
State
</td>
<td>
<asp:DropDownList ID=”ddlState” runat=”server” >
<asp:ListItem Text=”" Value=”" />
<asp:ListItem Text=”CO” Value=”CO” />
<asp:ListItem Text=”TX” Value=”TX” />
<asp:ListItem Text=”FL” Value=”FL” />
<asp:ListItem Text=”OK” Value=”OK” />
</asp:DropDownList>
</td>
</tr>
</table>
<br />
<asp:Button ID=”butSave” runat=”server” Text=”Save” OnClientClick=”isDirty=false” onclick=”Page_Save” />   |  
<asp:Button ID=”butCancel” runat=”server” Text=”Cancel” />
</form>
</body>
</html>
[/sourcecode]