javascript editing prompt

Question

I am creating a web application in which i have to show an editing prompt when user wants to navigate from the page.

I want to only show this 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.

please give solution swiftly?

Answer 1

You can put a listener for any changes in the form fields. On change of anything you can set a dirty-flag on. Upon saving you can reset the same.

However, refer jQuery. It might have something built-in.

Answer 2

You could use onbeforeunload: https://developer.mozilla.org/en/DOM/window.onbeforeunload

However support is limited since it's based on something Microsoft invented and others just copied it. It's not possible to do what you want in browsers that don't support this event.

Answer 3

Copied from my answer to the first copy of this question: http://stackoverflow.com/questions/3350643/editing-prompt-in-javascript

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 onf 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();">