Show Confirm Navigation using onbeforeunload event in javascript

Category > JAVASCRIPT || Published on : Sunday, February 28, 2016 || Views: 11104 || Show Confirm Navigation using onbeforeunload event in javascript


Introduction

Here Pawan Kumar will explain how to Show Confirm Navigation using onbeforeunload event in javascript

Description

In previous post I have explained Age Calculator using ASP.NET & C#, How to Access AppSettings in Code Behind File, Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery, Sql query Script to get the columns with datatype of tables with default values, Top Popular Open Source .Net Projects - Websites/Portals : Portal/CMS, Top Popular Open Source Forum ASP.Net Projects, and many more articles.

Now I will explain How to Show Confirm Navigation using onbeforeunload event in javascript

So follow the steps to learn Show Confirm Navigation using onbeforeunload event in javascript

 

Show Confirm Navigation using onbeforeunload event in javascript

Complete HTML Codes:-

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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">
    <script type="text/javascript">
        document.onkeydown = getKeyCode;
        var keyCode = 0;
        window.onbeforeunload = confirmExit;
        function confirmExit() {
            // F5 is 116.
            if (keyCode == 116) {
                keyCode = 0;
                // For F5
                return "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?";
            }
            else {
                // For close browser
                return "You have attempted to leave this page." +
        "Are you sure you want to exit this page?";
            }
        }
        function getKeyCode(e) {
            if (window.event) {
                e = window.event;
                keyCode = e.keyCode;
            }
            else {
                keyCode = e.which;
            }
        }
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

Screenshot Output:-

Conclusion:

So, In this tutorial we have learned, Show Confirm Navigation using onbeforeunload event in javascript

Download Source Codes