Difference form submission in Javascript
This article will introduce a the concept of “delta differencing” form submission in Javascript and discuss the benefits of using this concept.
As yet I have been unable to find any open source libraries and have not heard of any projects that use this concept other than those that I have worked on. I would be very interested to hear of any projects that do already have a working implementation.
What is delta differencing
Delta differencing is a method of performing data backup that only stores the changes in data since the last backup. For a more detailed explanation of delta difference backups see this page. The idea behind this method (for backups at least) is that it will reduce the amount of storage required for the backup to be performed.
So now that we know what delta differencing is and how is used for backups we can apply this same concept to web forms.
delta differencing in web forms
In a web form the delta differencing concept is applied by disabling form fields using Javascript before the form is submitted if they have not changed since the page/form was loaded. This will mean that only the values for the fields that have changed are submitted to the server effectively creating a “diff” of the form data.
To checking whether a field has changed in most cases should be done using the defaultValue, defaultChecked and defaultSelected properties in Javascript. These properties maintain the original value of the field once it has been changed by the user so by comparing this property and the current value of the field you will be able to tell if the field has changed.
There are some cases that need special consideration when disabling fields such as check boxes and radio buttons. Also, the concept should not be applied to hidden fields as these fields are not directly changed by users.
What’s it good for?
The main advantages that using delta differencing for form submission offers are:
- Smaller request sizes when submitting forms – less network traffic. Particularly good for large, complex forms
- Prevents users from “clobbering” other changes in cases where multiple users are editing the same “record”
This concept is mainly useful for web applications with high numbers of users and/or high volumes of traffic. I would not typically recommend using this for a general websites where users are not editing existing records as the Javascript does add extra overhead to the form submission.
New records in an application
In a web application when you are creating a new record it would be highly unlikely that you want any of the fields to disable. For this reason I would suggest not adding the Javascript to your form in the case of new records.
Groups of fields
In some forms certain fields may be related to other fields. As a result of this relationship you may want all related fields to be submitted regardless of whether they have changed or not. In this case there is a couple of options:
- Disable the delta differencing altogether
- Add support for “groups” of fields in your Javascript. If any of the fields in a group change, all fields will be submitted
Final Thoughts
I have several working implementations of this in various applications. I am currently working on a stand alone Javascript library that will be provided in our projects section once completed.
If you want any further information or need input when writing your own implementation please feel free to contact me. Additionally, I would love to hear your thoughts on the delta differencing concept and this article in general so please leave comments.
That’s all for now.