Pages

Friday, June 3, 2016

MVC - JQuery Prompt User to Save Modified Page.

I had users clicking off my page while doing data entry, and I needed to make sure they didn't forget to save their modifications.

 

Here is a simple example HTML page that implements a rudimentary check.  This is not tested for all data types.   Enjoy.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> Safe Exit Test </title>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>

 

<body>

    <form action="">

        <input type="number" name="value" />

        <input type="submit" name="commit" />

    </form>

 

    <a href="http://209software.com">209software</a>

 

    <script>

        $(document).ready(function () {

            formmodified = 0;

            $('form *').change(function () {

                formmodified = 1;

            });

            window.onbeforeunload = confirmExit;

            function confirmExit() {

                if (formmodified == 1) {

                    return "New information not saved. Do you wish to leave the page?";

                }

            }

            $("input[name='commit']").click(function () {

                formmodified = 0;

            });

        });

    </script>

</body>

</html>

 

Share This!

Contact Us

Name

Email *

Message *