Checking for changes on form (is form dirty)

[Claus Mygind]

There is a fairly standard method out there for checking or testing if one or more controls on your form has been changed by simply looping through the form elements and checking their state vs. the default state. ie: the following code

    this.formIsDirty = function (formObj)
    {
        for (var i = 0; i < formObj.elements.length; i++)
        {
            var element = formObj.elements[i];
            var type = element.type;
            if (type == "checkbox" || type == "radio")
            {
                if (element.checked != element.defaultChecked)
                {
                    return true;
                }
            }
            else if (type == "hidden" || type == "password" || type == "text" ||
                     type == "textarea")
            {
                if (element.value != element.defaultValue)
                {
                    return true;
                }
            }
            else if (type == "select-one" || type == "select-multiple")
            {
                for (var j = 0; j < element.options.length; j++)
                {
                    if (element.options[j].selected !=
                        element.options[j].defaultSelected)
                    {
                        return true;
                    }
                }
            }
        }
        return false;
    };
 

That works great when your form is loaded with a value.

And I assume (if I am wrong here please correct me) that the default value/status is untouchable for updating.

This technique does not lend itself very well to a form that loads blank and is then back filled with data from an ajax call. In this scenario, it would be nice to establish a point at which the default values are set.

There is a difference between loading a form with data from the database and changing one or more of the values which have been loaded.

Is there some similar generic routine that could be used to test if one or more states/values of a form loaded from an AJAX call have been changed?

[Dormilich]

the only statement in this regard I found is

The accept, alt, max, min, multiple, pattern, placeholder, required, size, src, and step IDL attributes must reflect the respective content attributes of the same name. The dirName IDL attribute must reflect the dirname content attribute. The readOnly IDL attribute must reflect the readonly content attribute. The defaultChecked IDL attribute must reflect the checked content attribute. The defaultValue IDL attribute must reflect the value content attribute.

so I guess it doesn’t work with AJAX-given "default" values.

[Claus Mygind]

Yeah! that was the conclusion I also reached. Interesting the number of articles found on the web touting this as the way to go in handling change detection when ajax and json is the main method of communication these days.

Thanks for the followup.

[Dormilich]

you can of course define your own property (say input.predefined), where you can write your default value from AJAX.

[Claus Mygind]

That is one way to do it. I currently have a clunky system by which I update a global flag when any control is updated on the screen. On navigation from the screen without a save I alert the user to cancel or save.

I might have been using the test of the default value if I had not gotten this advice http://bytes.com/topic/javascript/an...ld#post3128929 back on May 25 '08. From the advice I determined there was no way to detect the default value, which of course was wrong.

Your method is similar to what I am doing, but I see it may be possible to use your concept to write a generic routine that would run when the form is loaded and add the predefined property to each control, which my ajax calls could update. It may be worth writing a small article about that and posting the example of how that might be done as an alternative to the current approach. You should think about that.

Thanks as always for your great advice.