Difference form submission in Javascript – follow up

In December 2008 I wrote an article introducing the concept of Difference forum submission in Javascript. We received some positive responses from this article and some requests for examples of exactly how this would work. This article is intended to provide a more practical view of the concept.

What is difference form submission?
The quick explanation of the concept is upon form submission unchanged fields are disabled (using Javascript) to prevent them submitting back to the server. The advantages of doing this can include reduced request sizes and the prevention of “clobbering” data in applications where multiple users are editing the same records.

For the full explanation see the original Difference forum submission in Javascript post.

Example 1
This first example is fairly simple. It includes a single Javascript function that is called when the submit event of the form is fired. The form has an example of every field type (that I could think of) so you can see which fields get submitted and which are disabled. The forms have a method attribute of “get” so for this example you will be able to see the submitted form field values in the URL.

When the submit button is clicked the diff() Javascript function is called and the form object is passed to it. The function then loops over all the elements in the form checking if they have changed by comparing the appropriate properties (value, defaultValue, checked, defaultChecked, selected, defaultSelected). If the elements have not changed they will be disabled.

Note that there are certain field types not listed in the function on purpose including hidden, button and reset. The field types not listed will obviously never be disabled.

View example here.

Example 2 – jQuery plugin
This second example works the same as the first. The difference is that the Javascript has been rewritten so it is now a working jQuery plugin. The plugin currently has an “addFormDiff” method and a “formDiff” function. The “addFormDiff” method is used to bind the formDiff function to the submit event of the form.

View example here.

I will also note that this is the first time I have written a jQuery plugin (or even used jQuery believe it or not) so any feedback relating to the plugin itself is welcomed.

The jQuery plugin will also be stored at http://plugins.jquery.com/project/formdiff

Testing of the code
All of the code above was tested in the latest versions of Internet Explorer 6, Internet Explorer 7, Firefox 3, Konqueror, Safari, Opera and Chrome so it should be compatible with most of the browsers you are likely to need.

What’s next
There are possible scenarios where you would need to group certain fields together (if one changes they both submit). The code does not currently support this as a feature so it is one possible future addition. There may also be other features that could be added to the library or plugin.

That is all for now. If you find this useful or use any of the above code in your projects please let us know by leaving a comment of sending me an email. As usual all thoughts and feedback is appreciated.

March 1st, 2009 | Other posts by Michael Little
  • One is an enterprise application that is used by people worldwide, some barely have dialup to access it so less bandwidth used is good, especially since a few of the forms have 30 fields or more including textareas. Another is a dating website that I ported to our framework a few months ago. The huge profile form definitely can make use of it.

    We'll probably also use it on a project we're going to do as a proof-of-concept of our framework (see link). It will be a kind of collaborative application that will include real-time chatting, file upload, some kind of wiki, calendar integration and more. Basically an user can create or join various teams, with each team having their own channels and tools. Teams have the option of making the whole team or any of their resources private and to control access to each. It will be made available both as a free service and as source along with a lengthy tutorial on its design and implementation that will be included in the framework's documentation. We'll use the framework's mailing list (and trac) to work on it, so feel free to subscribe and follow the project.
  • Loïc,

    Thanks for your comments. Perhaps a reset method should be added to the list of future upgrades for the plugin. It shouldn't be difficult at all to do that though.

    Out of curiosity what type of application would you be using it in?
  • Nice work, and thanks for the jQuery plugin, we'll definitely use it.

    I see from the code that it could work very well with the forms plugin and others, allowing you to use it to submit the form diff through AJAX. You'd still have to reenable all the disabled fields after the form gets submitted of course.
  • That is interesting. I am curious as to why you say doing it on the server side is "better"?

    It seems to me that the way you are suggesting increases the request size (rather than decreasing it). On top of that there's a good chance you would have the database record already loaded on the server side so why would you bother putting all the extra overhead of submitting 2 copies of every field when you could no doubt just use the fields in the database record to compare against.

    It seems counter productive.
  • Tri Bui
    I have been doing this for years. It is better to do it via server side.

    What I do is put a HIDDEN form value called "ORIG_varname" for every input.

    On the server side I iterate through varname and compare with ORIG_varname. If they are the same, I unset or remove them from the POST.

    Tri Bui
blog comments powered by Disqus