Editing prompt in javascript

Question

i am creating a web application in which i have to show an editing prompt while user want to navigate from the page?But only when users had edited some value on that page and he does not save the changes then the prompt will ask "Do you want to save the changes ?".otherwise if he saved then the prompt does not appear? Editing prompt similar to MICROSOFT WORD/EXCEL to inform you that you are making changes and do you wish to proceed.

Answer 1

You'll need to use the change event on all your inputs to detect any changes made by the user. This event doesn't bubble, so you'll need to attach it to each input individually. Then you'll need to use the beforeunload event of the window object to prompt the user.

<script type="text/javascript">
    var anythingEdited = false;

    function inputChanged() {
        anythingEdited = true;
    }

    window.onbeforeunload = function(evt) {
        if (anythingEdited) {
            evt = evt || window.event;
            evt.returnValue = "You have edited something. If you click OK, your changes will be lost.";
        }
    };
</script>

First name: <input type="text" id="firstName" name="firstName" onchange="inputChanged();">