Check If Web Form Values Have Changed

I have a multi-step form and user can navigate to any page to modify or add information. There is a menu that shows the current progress, the steps the user has completed, and allo

Solution 1:

The jQuery "Dirty Form" plugin may help you out here:

http://plugins.jquery.com/project/dirtyform

Solution 2:

Try to check the form values like this. The call of initFormChangeCheck() copies all values into an mirror object and sets the events mousedown and keydown on each form element what are calling the checkChange routine. You also could check by an interval.

var fList = newObject();
functioninitFormChangeCheck() {
  for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) {
    el = document.forms[0].elements[fOi];
    fList[el.name] = el.value;
    el.onmousedown = checkChange;
    el.onkeydown = checkChange;
  }
}
functioncheckChange() {
  var changed = false;
  for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) {
    el = document.forms[0].elements[fOi];
    if (fList[el.name] != el.value) {
      changed = true;
    }
  }
  document.forms[0].show_invoice.disabled = changed;
}

Peter Gotrendy News

Solution 3:

This is not entirely easy without JQuery because the onchange event for forms is not consistently supported across browsers.

I'd say if you can, use one of the jQuery plugins presented in the other answers.

If jQuery is out of the question, consider adding a simple onchange='if (this.value != this.defaultValue) dirty_flag = true;' to each input element. If you want a clean approach, do this in a <script> section:

document.getElementById("formid").onchange = 
 function() { if (this.value ....) }

Solution 4:

The jQuery Form Wizard plugin should be useful in this case.

See Demo Here

Solution 5:

Since you mentioned you're posting back between steps, I'd have a hidden field that stores what the next step is. By default this would be the next step of the form. The "Save and Continue" button just submits the form.

Each menu entry then would then set the value of this hidden form to the appropriate step, and then it would submit the form. Something like:

<scripttype="text/javascript">functiongoToStep(step) {
document.getElementById("hiddenFieldID").value = step;
document.getElementById("formID").submit();
}
</script><ulid="menu"><li><ahref="javascript:goToStep(1);">Step 1</a></li><li><ahref="javascript:goToStep(2);">Step 2</a></li>
  etc...
</ul>