jQuery plugin that adds a gmail-like confirm-before-exit feature to a form

* jQuery

If you use Gmail service, you must have noticed that after you try to close a tab which contains an unsaved draft, a confirmation window pop-ups, asking if you are sure about closing the unsaved draft.



I tried to implement this feature in my form, but eventually I found out that the Opera browser does not support the window.onbeforeunload event. After that I found a small jQuery plugin, called FormNavigate that attaches to form’s onchange the window.onbeforeunload event. This plugin still doesn’t solve the Opera problem, but its usage is quite simple and intuitive.

$("YourForm").FormNavigate("YourMessage");



When I looked over the Gmail’s js-code once again, I noticed that when a user tries to click on any link, confirm is triggered, and thereafter on windows close or page refresh the onbeforeunload event is triggered. It solves partially the Opera problem (even thought we still can’t handle the window close/refresh action, at least we can intercept the attempt to leave the page by clicking a link).

Therefore I decided to improve the above-mentioned script, so that make it work likewise the Gmail script does.

$("YourForm").FormNavigate({
message: "The form has been changed! \n Are you sure you want to close this page?",
aOutConfirm: "#DivID a.confirm, #DivID2 a"
});



The aOutConfirm specifies the links, which will raise the warning message when a user clicks on them. If you don’t specify any, the message will be raised for any link that has been clicked.

Original script
Improoved script
Demo of the improoved script