How to show the “Are you sure you want to navigate away from this page?” when changes committed?

by

Here in stackoverflow, if you started to make changes then you attempt to navigate away from the page, a javascript confirm button shows up and asks: “Are you sure you want to navigate away from this page?” blee blah bloo…

Has anyone implemented this before, how do I track that changes were committed?
I believe I could do this myself, I am trying to learn the good practices from you the experts.

I tried the following but still doesn’t work:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type="text" onchange="changes=true;"> </input>
</body>
</html>

Can anyone post an example?

18 Answers
18

Leave a Comment