Re: How to check that a form has been changed

Taras_96 wrote:
> Hi everyone,
>
> How do you detect that a form element has been changed?

It depends on what you mean by 'changed'. Do you mean if any control
has a value that differs from its default value? Or does 'changed'
include where a user changes to some other value, then back to the default?

> This thread:
>
> http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/9ae1c9d419264380/125a82c9be127790?lnk=st&q=checking+html+form++(updated+OR+edited+OR+changed)&rnum=28&hl=en#125a82c9be127790
>
> suggests that you attach onChange event handlers to every form element,
> and when the handler fires you update a global 'isChanged' variable.

An alternative is to go through all the form controls and test if their
current value is the same as their default value. Where it isn't,
they've been changed.

How you do the test depends on the type of element. Inputs of type
"text", "file" or "password" have a defaultValue attribute that is their
default value, so you can test their current value against that.

For select elements, test if the selected option's 'defaultSelected'
attribute is 'true'. For radio buttons and checkboxes, test their
'defaultChecked' attribute.

Another scheme is to always have the first control of any group selected
(select, radios), no checkboxes selected and no value in text controls.
  Then you can test against logic rather than values.

Another option is to use onload to create an object that stores the
names or ids of form controls and their values, then you can check
against that when the form is submitted.

> This technique seems to be a bit messy to me (I have many form
> elements), I was thinking about storing the original form object in a
> javascript variable when the body loads (in the bodie's onLoad event
> handler),

How to you expect to achieve that?

> and upons submission, doing a javascript equality comparison
> with the current form object. If nothing has changed, then the two
> objects should be equal, right?

In JavaScript, objects are only equal to themselves (I wish I had a
reference for that statement but I don't). There is no way to copy an
objectA to create a new objectB so that :

    objectA == objectB

returns true; it will always return false. The statement will only be
true if objectA and objectB are references to the same object.

> if(oldObject == document.getElementById('form'))
> {
> alert('has changed!');
> }
>
> Would this work?

No - that is, it will not reliably test whether the form has been
changed or not.

-- 
Rob