Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Warn user before leaving web page with unsaved changes

Suggested Videos
Part 9 - RegisterStartupScript and RegisterClientScriptBlock methods
Part 10 - ASP.NET control client id in JavaScript
Part 11 - JavaScript calendar date picker for ASP.NET

In this video, we will discuss how to warn the user before leaving web page with unsaved changes. Let us understand this with an example.

Here is what we want to do

1. When the WebForm is first loaded, the Save button must be disabled as there is nothing to save on the form.
javascript save changes before leaving page

2. As we start to type in the text box the Save button should be enabled
page closing event in javascript

3. At this point, 
a) If we try to close the browser or
b) Refresh the page by hitting F5 key or
c) If we try to navigate to another page by changing the URL in the address bar

We should get a warning message stating that we have unsaved data on the page
javascript onbeforeunload event

4. If we have some data to save in the textbox and When we hit the Save button, the data should be saved and when the page reloads the textbox should be empty and the Save button should be disabled.

5. If there is nothing to save and when we try to close or refresh or navigate to a different URL, no warning message should be displayed.

<%@ Page Language="C#" CodeBehind="WebForm1.aspx.cs"
         AutoEventWireup="true"  Inherits="Demo.WebForm1" %>
<html xmlns="">
<head id="Head1" runat="server">
<body style="font-family:Arial">
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"
        Rows="5" Columns="30" onkeyup="hasPendingChanges()">
    <br /><br />
    <asp:Button ID="Button1" runat="server" Text="Save" disabled="true"
        OnClientClick="onSaveButtonClick()" onclick="Button1_Click" />
    <script type="text/javascript">
        var changesSaved = true;

        function onSaveButtonClick()
            changesSaved = true;

        function hasPendingChanges()
            changesSaved = document.getElementById('TextBox1').value.length == 0;
            document.getElementById('Button1').disabled = changesSaved;

        window.onbeforeunload = function ()
            if (!changesSaved)
                return "You haven't saved your changes";

ASPX.CS code
using System;
namespace Demo
    public partial class WebForm1 : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
        { }

        protected void Button1_Click(object sender, EventArgs e)
            // ADO.NET Code to save changes to the DB
            TextBox1.Text = "";

JavaScript with ASP.NET tutorial


  1. Sir,
    Is it possible to detect if Browser Refresh button is clicked or Browser Close button is clicked?


  2. these videos are very usefull for beginers but plz make 1-2 video on 3-tier arch so that beginers can work in companys efficentl
    Thanks sir


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.