Adjusts a form to only send changed inputs by disabling inputs indicated (with class "js-enabledOnClick") and adding a click handler to re-enable them. Useful for large forms in which few edits are expected.

enabledOnClick.js

/**
 * enabledOnClick
 *
 * Disabled specified form inputs until they are clicked.
 * This reduces overhead in HTTP by transmitting less data
 *                          Server Scripts by parsing fewer fields
 *                          SQL by sending fewer record UPDATEs
 *
 * To specify an input for inclusion add class="js-enabledOnClick"
 */
(function () {
	//find all specified inputs
	var a = document.getElementsByClassName('js-enabledOnClick');
	var oSpan, oInput, oSpan2;
	for (var f = a.length - 1; f >= 0; f--) {
		oInput = a[f];
		oInput.className = oInput.className.replace(/js-enabledOnClick/g, '');
		//Disable the input, for now
		oInput.setAttribute('disabled', 'disabled');

		//Wrap the input in a span and overlay another span to house onclick
		//This is required because FF doesn't propagate click events past
		// disabled inputs
		oSpan = document.createElement('span');
		oSpan.style.position = 'relative';
		oSpan.style.display = 'inline-block';
		oInput.parentNode.insertBefore(oSpan, oInput);
		oInput.parentNode.removeChild(oInput);
		oSpan.appendChild(oInput);
		oSpan2 = document.createElement('span');
		oSpan2.style.display = 'block';
		oSpan2.style.position = 'absolute';
		oSpan2.style.top = 0;
		oSpan2.style.right = 0;
		oSpan2.style.bottom = 0;
		oSpan2.style.left = 0;
		oSpan.appendChild(oSpan2);

		//Add re-enabling onclick event to overlaid span
		oSpan2.onclick = function () {
			this.previousSibling.removeAttribute('disabled');
			this.previousSibling.focus();
			this.parentNode.removeChild(this);
		};
	}
})();