1

Possible Duplicate:
How do I stop a page from unloading (navigating away) in JS?
Prompt user for unsaved changes when leaving webpage

I have a php form which i designed in dreamweaver containing only text fields, which retrieves a single record at a time from my database. I have on this page also an 'update record' button which when clicked updates the database record with any changes that was made to the data in the form. I want that if a user edits form data in some way and tries to leave the page without clicking the 'update record' button, that they would be prompted that the page contains unsaved changes and they would be asked to verify if they want to leave or not (maybe via some javasript if possible).

Any help is much appreciated.

Community
  • 1
  • 1
Aetos
  • 25
  • 1
  • 5

2 Answers2

7

onbeforeunload fires before navigation actually begins, and you can stop the navigation using a rather unique method: simply return the string you'd like displayed in a dialog, and the browser will ask whether or not the user really wants to leave the page.

If you don't return a string, the browser continues navigation normally. You could use this behavior, for example, to only show a prompt if the user has unsaved changes.

window.onbeforeunload = function(e) {
    if (unsavedChanges) return 'Dialog text here.';
};

You can only stop navigation by returning a string and letting the browser prompt. Calling alert or confirm is actually prohibited in onbeforeunload, and in onunload, you have no facility to actually stop navigation.

josh3736
  • 139,160
  • 33
  • 216
  • 263
  • thank you for the response, but i would like to see the dialog only if changes were made to the form, otherwise no dialog...any idea how to do this? – Aetos Jan 16 '13 at 20:19
  • Maintain a variable (called `unsavedChanges` in my example) that tracks whether or not a change has been made. It could be a simple as listening for keyboard events on your inputs and setting the variable to true when one is fired. – josh3736 Jan 16 '13 at 20:20
1

Use unload method with "on" api of jquery.

 var flag = true; // set this var according to your use.
 $(window).on('beforeunload', function(){
     if(flag) {
        return "It looks like you have input you haven't submitted."
      }
 });
insomiac
  • 5,648
  • 8
  • 45
  • 73
  • 1
    **This does not work.** The `unload` event cannot stop navigation. – josh3736 Jan 16 '13 at 20:11
  • its beforeunload event and use it with "on" api instead of bind. – insomiac Jan 16 '13 at 20:26
  • This still does not work, because you cannot do anything with the result of the `confirm` call. (What do you do on the `// Do something else` line?) Besides, HTML5 mandates that calls that generate modal UI (such as `confirm`) are ignored in `beforeunload`, so this would do absolutely nothing in newer browsers. The **only** way to stop page navigation is by [*returning*](http://stackoverflow.com/a/14366972/201952) a string from `beforeunload` and letting the browser do the prompting. – josh3736 Jan 16 '13 at 20:51
  • you return the text you want to show in your dialog box and then the default box will take care of whatever you click. Check my updated answer – insomiac Jan 16 '13 at 20:55