Blog

Capture the Browser Back Button - JavaScript Snippets

Capture the Browser Back Button - JavaScript Snippets

It’s a common problem: “I have an ASP .Net data entry form and all of my users are mad at me because they closed their browser and they lost their unsaved data!”

If I had a dollar for every time I had to re-enter my shipping address because I used my back button when the site creator didn’t want me to… well I’d have enough dollars to make the mistake a few more times, probably buying robot parts on SparkFun .

Amazingly though, adding JavaScript code to your ASPX page to prevent this is almost trivial once you know what you’re doing (the previous link is for reference only… if you haven’t heard of JavaScript, you’ve been in a coma since the late 90’s). JavaScript lets you fire the special “onbeforeunload” event before the data is lost on the page, something that you can’t really do using code behind.

This event lets you warn the user before they navigate away from the page via clicking the explorer back button, following a link on the page, or even by closing the browser window! For more details of the onbeforeunload event, see my previous blog, here .

Assign the appropriate JavaScripts to your page controls (guidelines are shown in the tables below):

Which JavaScript Functions to Use
Data Entry Controls javascript:DataEdit()
Data Entry Controls that Post back javascript:DataEditWithPostback()
Non Data Entry Controls that Post back (i.e. action buttons on the form) javascript:Postback()
Controls that save the data javascript:DataSave()
Properties to Assign Scripts To
Textbox onkeyup and/or onchange
DropDownList onchange
Checkbox onclick
Button onclientclick
Description Example Code Snippet
Textbox that does not post back A username field <asp>:TextBoxID="txtUsername" runat="server" onkeyup="javascript:DataEdit()" onchange="javascript:DataEdit()"/>
Textbox that does post back An amount field that is used in a running total <asp>:TextBoxID="txtAmount" runat="server" AutoPostBack="True" onkeyup="javascript:DataEdit()" onchange="javascript:DataEditWithPostBack()"/>
DropDownList that does not post back A selection from a list, such as a group <asp>:DropDownListID="ddlGroup" runat="server" onchange="javascript:DataEdit()"/>
DropDownList that does post back A selection such as a type that changes the context of the form <asp>:DropDownListID="ddlType" runat="server" AutoPostBack="True" onchange="javascript:DataEditWithPostBack()"/>
A checkbox A “Yes / No” field <asp>:CheckBoxID="cxbNotify" runat="server" onclick="javascript:DataEdit()"/>
A button that posts back A “Next Page” button <asp>:ButtonID="btnNextPage" runat="server" Text="Next" onclientclick="javascript: PostBack()"/>
A button that posts back and changes data An “Add New Row” button <asp>:ButtonID="btnAddRow" runat="server" Text="Add Row" onclientclick="javascript: DataEditPostBack()"/>
Button that runs code to save data Button that runs the page save function <asp>:ButtonID="btnSave" runat="server" Text="Save" onclientclick="javascript:DataSave()" OnClick="fnSave"/>

Finally, copy this code onto the bottom of you ASCX page:

<div style="display: none;">
  
  <asp:CheckBox ID="chkShowWarning" runat="server" />
  
</div>



<script type="text/javascript">
  
  var bShowWarning=new Boolean();
  
  var bPostBack=new Boolean();
  
  
  
  function DataEdit() {
    
    bShowWarning = true;
    
    document.getElementById('<%=chkShowWarning.ClientID%>').checked = bShowWarning;
    
  }
  
  
  
  function PostBack() {
    
    bPostBack = true;
    
  }
  
  
  
  function DataEditWithPostBack() {
    
    bShowWarning = true;
    
    bPostBack = true;
    
    document.getElementById('<%=chkShowWarning.ClientID%>').checked = bShowWarning;
    
  }
  
  
  
  function DataSave() {
    
    bShowWarning = false;
    
    bPostBack = true;
    
    document.getElementById('<%=chkShowWarning.ClientID%>').value = bShowWarning;
    
  }
  
  
  
  function LoadWindow() {
    
    bShowWarning = document.getElementById('<%=chkShowWarning.ClientID%>').checked
      
      bPostBack = false;
    
  }
  
  
  
  function UnLoadWindow() {
    
    if (!(bShowWarning) || bPostBack) {
      
      return
        
    }
    
    return 'If you leave the page your data will be lost.'
      
  }
  
  
  
  window.onbeforeunload = UnLoadWindow;
  
  window.onload = LoadWindow;
  
</script>

If you’ve done everything right, your application should now show a pop-up warning if and only if you try to navigate away from the page after editing a control and before saving.

Learn more about DMC's software and web development services.

Comments

Serguei
Sorry, I've not found information how to catch browser back button event by JavaScript...
reddy
# reddy
Thank you Puskala, I found alternative for user controls inside the main user control. I have placed sub-user control inside a panel when user opens sub-usercontrol, I have called onclick event of panel and called “DataSave()” so when sub-usercontrol is closed the main user control beforeunload is called as the bShowWarning value is false, message is not prompted. Thank you very much for nice forum.
Matt Puskala
# Matt Puskala
Hi Reddy, I don't know that we have ever had to do that before so I'm not sure what the solution is.
reddy
# reddy
I have used the above code in a user control that is working great, but i another three user controls inside this control, say for example i have another user control in main user control control, which has link button (Sub-UserControl) when i click on the Link of Sub-UserControl a popup will be dispalyed when i close the sub-usercontrol , main user control postback will happen i need to get content modified in Sub-UserControl to be disaplyed in page, onbeforeunload of main control is called i need to suppress if main user control postback is due to sub-control unload. How to do this?
Please help me this urgent.
Angelo
# Angelo
Why not just add the elements whose data you want to persist to the ViewState?

EnableViewState="true"
sam
# sam
thanks

Post a comment

Name (required)

Email (required)

CAPTCHA image
Enter the code shown above:

Related Blog Posts