By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,626 Members | 1,862 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,626 IT Pros & Developers. It's quick & easy.

Checking for changes on form (is form dirty)

Claus Mygind
100+
P: 571
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

Expand|Select|Wrap|Line Numbers
  1.     this.formIsDirty = function (formObj)
  2.     {
  3.         for (var i = 0; i < formObj.elements.length; i++)
  4.         {
  5.             var element = formObj.elements[i];
  6.             var type = element.type;
  7.             if (type == "checkbox" || type == "radio")
  8.             {
  9.                 if (element.checked != element.defaultChecked)
  10.                 {
  11.                     return true;
  12.                 }
  13.             }
  14.             else if (type == "hidden" || type == "password" || type == "text" ||
  15.                      type == "textarea")
  16.             {
  17.                 if (element.value != element.defaultValue)
  18.                 {
  19.                     return true;
  20.                 }
  21.             }
  22.             else if (type == "select-one" || type == "select-multiple")
  23.             {
  24.                 for (var j = 0; j < element.options.length; j++)
  25.                 {
  26.                     if (element.options[j].selected !=
  27.                         element.options[j].defaultSelected)
  28.                     {
  29.                         return true;
  30.                     }
  31.                 }
  32.             }
  33.         }
  34.         return false;
  35.     };
  36.  
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?
Aug 25 '11 #1
Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
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.
Aug 26 '11 #2

Claus Mygind
100+
P: 571
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.
Aug 26 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
you can of course define your own property (say input.predefined), where you can write your default value from AJAX.
Aug 26 '11 #4

Claus Mygind
100+
P: 571
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.
Aug 26 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.