Find out if html form has changed

Question

Using jquery I've added a change handler to a form. This works when any input is changed BUT only if the user manually changes an input and not when some other code changes the input.

Is there any way to detect if a form has changed even if its inputs are changed by code?

Answer 1

Yes, there seems to be some confusion over this. In an ideal world you would expect the onchange event to happen whenever the inputs change but thats not what happens. I'm sure for good reasons to - maybe not.

One way I've overcome this obstacle is to capture the form state into a variable just after displaying it and then just before submitting it to check if the state has changed and to act accordingly.

An easy state to store is what the serialize function returns. An easy place to store the state is using the data functionality. Both serialize and data are available with jquery.

Of course you can use other different forms of state (some form of hash) or storage for this state (standard global variable for example).

Here is some prototype code:

If your form id is 'xform' then you can call the following code when the form has displayed:

$('#xform').data('serialize',$('#xform').serialize());

And then, when you need to check, for example just before a button submit you can use:

if($('#xform').serialize()!=$('#xform').data('serialize')){
    // Form has changed!!!
}

You could wrap all this up into a copy & paste javascript snippet that will give you a formHasChanged() function to call wherever you need it (NOT TESTED):

$(function() {
    $('#xform').data('serialize',$('#xform').serialize());
});
function formHasChanged(){
    if($('#xform').serialize()!=$('#xform').data('serialize')){
        return(true);
    }
    return(false);
}

But I'll stop here otherwise I'll create yet another jquery plugin.

Answer 2

Serializing the form is certainly an option, but it will not work if:

• you want to know which fields have changed
• it only needs to check a subset of the fields
• dynamically adding or removing fields.

Fortunately, every form element has a default value associated with its object:

• input, textarea : defaultValue
• checkbox, radio : defaultChecked
• select: defaultSelected

for ex: to ckeck if input or textarea has changed:

var changed = false;
$(":text,textarea").each(function(){
    changed = this.value != this.defaultValue;
    return !changed; // return if at least one control has changed value
});

Answer 3

This is easily achieved in JavaScript without jQuery. initChangeDetection() can be called multiple times:

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);
}

Test on JS Bin

---

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

function initChangeDetection(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    el.dataset.origValue = el.value;
  }
}
function formHasChanges(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    if ('origValue' in el.dataset && el.dataset.origValue !== el.value) {
      return true;
    }
  }
  return false;
}

Answer 4

Not in a regular way.

You can change with input and then trigger the change event.

$('#inputId').val('foo').trigger('change');

or with this:

$('#inputId').val('foo').change();

Answer 5

Here is what i did (i found my solution using zaf's answer)

$("form").change(function() {
    $(this).data("changed","true");
});

$("input[type='submit']").click(function() {
    if($("form").data("changed") == "true") {
        var discard = confirm("Some unsaved changes. Discard them ?");
        if(!discard) return false;
    }
});

Answer 6

With vanilla javascript you can hash the values of the inputs.

You can hash the values of the form. I recommend just using the name of every input as key and the value as value. You then can use a query selector, to loop through each input of the form to get the hashes.

To check if values in the form changed you can then just compare the hashes of the forms. I store the initial hash in a data attribute of the form.

Here is one possible implementation:

function initFormHash(form) {
    form.setAttribute("data-initial-hash", getFormHash(form));
}

function getFormHash(form) {
    const formValues = {};

    form.querySelectorAll("input").forEach(input => {
        const inputType = input.getAttribute("type");
        const inputName = input.getAttribute("name");

        if (inputType === "hidden") return;
        if (!inputName) return;

        if (inputType === "checkbox" || inputType == "radio") {
            formValues[inputName] = input.checked;
            return;
        }

        formValues[inputName] = input.value;
    });

    form.querySelectorAll("textarea, select").forEach(textarea => {
        const name = textarea.getAttribute("name");

        if (!name) return;

        formValues[name] = textarea.value;
    })

    return JSON.stringify(formValues);
}

function formChanged(form) {
    return (form.getAttribute("data-initial-hash") !== getFormHash(form));
}

Answer 7

Try onchange attribute According to W3c it should trigger anytime the content of an element, the selection, or the checked state have changed.