Fastest (Javascript/jQuery) way to track changes in a large input form

Question

Since Javascript performance can possibly get intensive on large input forms, what is the cleanest and fastest way to track and mark changes to the input fields?

The project is using .NET (MVC) and the inputs are bound to ViewModels but that is likely (at least semi) irrelevant. My main concern is to avoid performance issues if there are possibly a few thousand fields and a number of hidden input fields (generally there is a lesser amount, however there are cases where there can potentially be a couple thousand). There are dropdowns, textfields, checkboxes, etc.

A long form with various input types.

<input type="... textbox/select..." class="trackMe" ... />
<input type="hidden" class="hiddenInputIsDirty" ... />

The options that come to mind.

Unobtrusively:

$( ".trackMe" ).on( "change", function() {
    $(this).sibling("#hiddenInputIsDirty").val("true");
});

Or

Alternatively using onClick="Observe.MarkChanged();" on the input.

(function( Observe, $, undefined ) {        
    //Public Method
    Observe.MarkChanged = function() {
        $(this).sibling("#hiddenInputIsDirty").val("true")
    };        
}( window.Observe= window.Observe|| {}, jQuery ));

To clarify: Each visible input field will have a hidden input field to mark. When the user changes the input fields value it will trigger something to mark the hidden field as changed. I assume this is the fastest and most reliable way to track changes. Is one of these methods known to be faster, or are there faster alternatives?

Answer 1

You can use MVVM pattern .

I would recommend Knockout .

Answer 2

One simple method that you can put to use immediately is to use an object to hold your tracking instead of multiple hidden inputs. Multiple hidden inputs will only double up your form elements and slow down. Later on you can learn and move to libraries which will wire-up everything for you out-of-box.

Something like this:

// initialize at the start
var tracker = new Object;

$('input.formfield').each(function() {
    tracker[$(this).attr('id')] = false;
});

// and then later on

$(".track").on("change", function() {
    tracker[$(this).attr('id')] = true;
});

You first initialize the object with same property names as the form input id s and make them false. Then on any change, simply flip the corresponding property. Once done, you can simply pass this object to your server-side code or check before submitting.

Check this fiddle: http://jsfiddle.net/VbVyp/3/

And yes, thousands of form-fields may not be a good idea irrespective of what library you use. Implement wizard like paging.

Answer 3

You can see the following jquery library to track changes. https://github.com/shashankshetty/FormChangeTracker