feature request - form changeonly

[devnull]

With large foms that have a lot of fields and multiline text boxes, data is being sent to the server and updated in the database that actually has not changed.

It would be a very neat enhancement if a form could have a configuration option that only submits form values that have been changed since the form was last submitted or loaded.

Is this possible ?

[stworthy]

You can bind the 'onChange' event on the form to detect what fields are changed. Store these changed field values and post them to the server.

Code:

var data = {};
$('#ff').form({
	onChange:function(target){
		var t = $(target);
		if (t.data('textbox')){
			data[t.attr('textboxName')] = t.textbox('getValue');
		} else {
			data[t.attr('name')] = t.val();
		}
	}
})

[devnull]

Thanks, but if I do that then none of the form events will fire.

[stworthy]

Thanks, but if I do that then none of the form events will fire.

Please describe in more detail.

[devnull]

My application has around 30 pages, some forms on these pages has 5 or more tabs, each tab has up to 20 fields, that is a total of 100 fields for just one form.

If the user loads the form from the database and only changes one field and saves it, all 100 fields are sent to the server and updated in the database even though only 1 field has changed which is not very efficient.

If I use the onChange() event to capture what fields were changed, and then submit them externally using a standalone ajax call, then the form will not fire the success() events.

My application is a bit different, in that I only define the form() object once, and every page will use this same form object and the same set of common, LOAD, ADD, SAVE and DELETE buttons / functions, this means that I do not end up repeating an almost identical form object in each individual page.

All that changes from page to page are the fields in the form and the url that each page is submitted to, but the form handlers are common for every one of my pages.

So I would like to configure this form so that only changed fields are sent to the server (with the ability to force specific fields to always or never submit by classname i.e sub-on and sub-off)

[stworthy]

The 'dirty' property can be set to submit only the changed fields. You should call 'resetDirty' method to reset the 'dirty' state after submitting the data.

Code:

$('#ff').form({
  dirty: true,
  ajax: true,
  success: function(){
    $(this).form('resetDirty');
  }
});

Please download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5-patch.zip.