Dirty Forms is a flexible jQuery plugin to help prevent users from losing data when editing forms.
Dirty Forms will alert a user when they attempt to leave a page without submitting a form they have entered data into. It alerts them in a modal popup box, and also falls back to the browser’s default onBeforeUnload handler for events outside the scope of the document such as, but not limited to, page refreshes and browser navigation buttons.
Want more? Once you’ve done that, try editing the input and refreshing the page. Oh no you can’t!
Download it at GitHub: https://github.com/snikch/jquery.dirtyforms
Existing solutions were not flexible enough, so I wrote this to make sure that all of our use cases at Learnable would be supported. This includes TinyMCE as a rich text editor and ensuring dirty tinymce instances mark their form as dirty.
The .live() method is used to attach click and submit handlers so even elements that are introduced to the page after the page has loaded, e.g. loaded dynamically through AJAX, will be handled correctly.
A ‘form stash’ was created to capture and save event targets at the beginning of the event / decision stage so that elements that are no longer in the DOM can still have events fired on them (e.g. when a form is in a modal box, then the modal box is replaced by the Dirty Forms confirmation, the form will be stashed, and if the event is refired, it will be added back to the DOM then have the event triggered on it).
The entire modal / dialog functionality can easily be swapped out, it uses facebox by default.
Also, a lot of attention was paid to ensure that existing event handlers, and event bubbling is kept intact, no matter what.