Element OnReset Event?

[Eric]

Hi,

On my form, I turn the forecolor blue when an element's value changes by
comparing a custom "origVal" tag on each element. This works fine.

Then, when the user resets the form (double escape key), the onreset event
fires. I then loop through all the elements in the form and change the
forecolor back to black. This also works. However, it takes a long time to
loop through this because of the large number of elements on the page.

If possible, I want to process only the elements that have been reset, not
all of them. Is there some undocumented event or some method I can use to
revert the forecolor on only the changed items?

I already tried adding an "onreset" attribute to each element, but that
didn't fire. Also, the onchange event does not apply because it only fires
when a single element loses focus and has a changed value.

Thanks in advance,

Eric

[john henry bonham]

Eric wrote:

Hi,

On my form, I turn the forecolor blue when an element's value changes by
comparing a custom "origVal" tag on each element. This works fine.

Then, when the user resets the form (double escape key), the onreset event
fires. I then loop through all the elements in the form and change the
forecolor back to black. This also works. However, it takes a long time to
loop through this because of the large number of elements on the page.

If possible, I want to process only the elements that have been reset, not
all of them. Is there some undocumented event or some method I can use to
revert the forecolor on only the changed items?

I already tried adding an "onreset" attribute to each element, but that
didn't fire. Also, the onchange event does not apply because it only fires
when a single element loses focus and has a changed value.

Thanks in advance,

Eric

The following script assumes origVal is an Array.

for ( var i = 0 ; i < document.forms[ 0 ].elements.length ; i++ )
{
if ( document.forms[ 0 ].elements[ i ].value != origVal[ i ] )
{
document.forms[ 0 ].elements[ i ].style.color = '#000000';
}
}

Rob - Avagio IT Services
<a href="http://www.avagio.co.uk">Avagio IT Services</a>

[Thomas 'PointedEars' Lahn]

Eric wrote:

On my form, I turn the forecolor blue when an element's value changes by
comparing a custom "origVal" tag on each element. This works fine.
"origVal" tag?

For "input" and "textarea" elements, there is a "defaultValue" property that
you should use and should compare against:

<input
value="foo"
onchange="this.style.color = (this.value != this.defaultValue? 'blue' :
'');"><!-- one line! -->

<textarea>
onchange="this.style.color = (this.value != this.defaultValue? 'blue' :
'');"></textarea><!-- one line! -->

(Or do that in an event listener of the "form" element object.)
Then, when the user resets the form (double escape key), the onreset event
fires. I then loop through all the elements in the form and change the
forecolor back to black. This also works. However, it takes a long time to
loop through this because of the large number of elements on the page.

If possible, I want to process only the elements that have been reset, not
all of them. Is there some undocumented event or some method I can use to
revert the forecolor on only the changed items?
You have set them to blue text color, why not test against that? Then
set the style.color property of that elements to "" to set the default
text color. You should do that with style.backgroundColor as well, and
be sure to set both text *and* background color on change of an element.

<http://www.w3.org/QA/Tips/color>
I already tried adding an "onreset" attribute to each element, but that
didn't fire.

There is no "onreset" attribute for elements other than "form" elements.

<http://www.w3.org/TR/html4/index/attributes.html
PointedEars

[Eric]

Thank you both for your responses...very helpful. I'm still learning as I go. :-)

Take care,

Eric