DirtyForm: Watching for form changes with jQuery

Last time I mentioned that I had just finished the first steps of a jQuery plugin that would watch your forms and notify you before you left the page so your users don't lose that input they just took the time to type out but forgot to save. Well now its a little more robust and flexible.

What's new?

Lots of stuff has been updated.

• Dirty and Clean events are fired off when a form has unsaved changes, and again when the form is cleaned again.


• It works with jQuery tabs now (they are tricky and don't work like normal links).


• Not limited to forms. Any container of inputs will work just fine.

Dirty/Clean Events

Forms can observe the "dirty" event for customized behavior. So you could set up the dirty form and then bind a function to the dirty event like so:

$(function(){
  $("form")
    .dirty_form()
    .dirty(function(event, data){
      var label = $(event.target).parents("li").find("label");
      $("body").append("
" + label.text() + "Changed from " + data.from + " to: " + data.to+ "
")
    })
});

Dirty Forms + jQuery-UI tabs

You can use tabs with DirtyForm easily. Just be sure that you make the tabs into stopper links after they are set up as tabs so they can be recognized as such and set up properly. They need a lot of special casing.

$(function(){
  $("#nav").tabs();
  $("#nav a").dirty_stopper();
});

If you've already set up all the links for the app as stoppers don't worry this will still work as the other events will be unbound. No penalty for making any links into a stopper twice!

Not just for forms!

If you like throwing inputs in your table rows DirtyForm can handle it. Just tell it where you want it to look.

$(function(){
  $('tr').dirty_form();
});

The plugin is available for download from github: DirtyForm

DirtyForm

Let the fun begin!

Have you ever made changes and then clicked the wrong button or switched to another tab 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).

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 ELCTech's blog: DirtyForm post