Generic way to detect if html form is edited

Question

I have a tabbed html form. Upon navigating from one tab to the other, the current tab\'s data is persisted (on the DB) even if there is no change to the data.

I woul

Answer 1

Form changes can easily be detected in native JavaScript without jQuery:

function initChangeDetection(form) {
  Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
  return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}

initChangeDetection() can safely be called multiple times throughout your page's lifecycle: See Test on JSBin

---

For older browsers that don't support newer arrow/array functions:

function initChangeDetection(form) {
  for (var i=0; i