How to prevent user to lose the data on page unload

home » articles » How to prevent user to lose the data on page unload

How to prevent user to lose the data on page unload

(3)

(6689)

Avg: 0/5: (0 votes)

Published: 7/14/2009 by Raghav Khunger

In this article I will explain you how to prevent user data to lose when he accidentally click refresh or click the back browser button or click close button of browser ,or any task which leads to lose his or her data. And also we want that there should be provision that this condition should not be checked on Submit button as we already have some validations check on this button. We should prevent or prompt user that on performing these actions he will lose his data.

1.    Click on back browser button.

2.    Click on refresh browser button.

3.    Click on close button of browser.

4.    Click of forward browser button.

5.    Keyboard stroke- Alt+F4   (Close)

6.    Keyboard stroke- F5 (Refresh)

7.    Keyboard stroke-CTRL+ F5 (Refresh)

8.    Keyboard stroke-Shift+ F5 (Refresh)

9.    Change of url

10. Or anything that cause postback other than your particular submit button.

We should have standard capability to make sure if the user forgets to click the "Save" button before navigating away or closing their browser they should be warned or prompted that they should save their updated data or else they will lose the data. To explain that I have used two textboxes, one ASP.NET submit button with id TestButton.

Other postback controls that I have taken are: second asp.net button,one checkbox with autopostback property true, one dropdownlist with autopostback property true.

Now I have used all these postback controls so that to show you that we also need to show promt to user about the data lose when user perform actions on these controls.

On submit button we will not show the prompt as we have to submit the data with that control action.Here is the sample code.I have set window.onbeforeunload method on controls change.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $(':input').bind('change', function () { setConfirmUnload(true); }); // Prevent accidental navigation away
            $('.noprompt-required').click(function () { setConfirmUnload(false); });

            function setConfirmUnload(on) {
                window.onbeforeunload = (on) ? unloadMessage : null;
            }

            function unloadMessage() {
                return 'You have entered new data on this page.  If you navigate away from this page without first saving your data, the changes will be lost.';
            }

            window.onerror = UnspecifiedErrorHandler;
            function UnspecifiedErrorHandler() {
                return true;
            }
        });

    </script>
</head>
<body>
    <form id="form1" name="myForm" runat="server">
    <div>
        First Name :<asp:TextBox runat="server"></asp:TextBox><br />
        <br />
        Last Name :<asp:TextBox runat="server"></asp:TextBox><br />
        <br />
        IsMarried :<asp:CheckBox runat="server" /><br />
        <br />
        <asp:Button runat="server" ID="TestButton" Text="Submit" OnClick="TestButton_Click"
            CssClass="noprompt-required" /><br />
        <br />
         <asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
            OnClick="AnotherPostbackButton_Click" /><br />
        <br />
        <asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
            AutoPostBack="true" /><br />
        <br />
        DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
            AutoPostBack="true">
            <asp:ListItem Text="Text1"></asp:ListItem>
            <asp:ListItem Text="Text2"></asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
    </div>
    </form>
</body>
</html>

Above I have used: $('.noprompt-required').click(function() { setConfirmUnload(false); }) What I have done in this line is i am calling setConfirmUnload method and passing false as argument which will set the window.onbeforeunload to null. So what that means is on any control where you want that user should not be prompted, give that control the class .noprompt-required' and leave other as it is.

Happy Reading !