Tuesday 22 July 2014

An alert if the user navigates from one page to other if there are any unsaved changes in asp.net

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input[type=text], select, textarea").bind("keyup, change", function () {
                $(this).attr("rel", "edited");
            });
            $(window).on('beforeunload', function () {
                if ($("[rel='edited']").length > 0) {
                    return "There are some unsaved changes on the page. Do you still want to leave the page?";
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Name:
            </td>
            <td>
                <input type="text" id="txtName" />
            </td>
        </tr>
        <tr>
            <td>
                Address:
            </td>
            <td>
                <textarea id="txtAddress" rows="3" cols="10"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                Gender:
            </td>
            <td>
                <select>
                    <option value="">Please select</option>
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="submit" id="btnSubmit" value="Submit" />
                <a href = "Default.htm">Cancel</a>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>



No comments:

Post a Comment