Let the fun begin!
Have you ever made changes and then clicked the wrong button or switched to another tab on the page before you submitted the form and then realized that all your changes are gone. Wouldn’t it be nice if you were given a notification before you left so you would know what was about to happen. I thought so. So I wrote a jQuery plugin that does just that.
It’s very easy to integrate with your app as long as you’re using jQuery (If you’re not you should be).
How do you use it?
Just specify whatever forms you want to be watched as follows.
$(document).ready(function($){
$('form').dirty_form();
...
});
And then specify the links that should stop progress when a form has unsaved changes.
$(document).ready(function($){
...
$('a').dirty_stopper();
});
And that’s all there is to it. Then when you change an input on the form and try to click one of those links a pop-up will display asking if you would like to proceed or go back and save your changes. This can save your users a lot of frustration and wasted time.
If you have the livequery jQuery plugin installed DirtyForm will also work for form elements added at any point after the page loads.
In the near future I’m going to try to make this plugin work with the jQuery UI tabs function. It can be downloaded from github here: DirtyForm
Also posted on my blog at: puts post
Amazon Web Services
4 Comments
Solid! I need this for the blog posting
Just to be clear, by “…or switched to another tab” you’re talking about jQuery UI “tabs” right, not browser tabs?
@cary: Glad I could help!
@dvd: Yeah, some sort of javascripty tabs on a page. The plugin doesn’t work with them yet but it won’t be long now.
excellent bit of code. v.useful.
the only extra feature I needed was the ability to exclude certain items from the test,
so I changed as follows:
- $(‘:input:not(:hidden,:submit,:password,:button)’, dirtyform).each(function(){
+ $(‘:input:not(:hidden,:submit,.dirtyignore,:password,:button)’, dirtyform).each(function(){
that way I can do class=’textfield dirtyignore’ and it is, well ignored.
Thanks again
–Richard
http://zaretto.com