[thelist] Didja know??

[Anthony Baratta]

(..trying hard to not be a rant...)

<TIP SUBJECT="IE and Javascript DOM" AUTHOR="Anthony Baratta">

IE does not like your form fields to be all numbers, (or possibly start 
with a number, I didn't have time to test all outcomes) when you iterate 
through the form elements array via Javascript. I tested this out with IE 
5.0 sp2 and 5.5.

For example I was creating the following javascript on the fly with ASP:


var varDirection = true;
function PreSelectMajors(input) {
     var majorsIDs = new Array('201');
     var varCheck = true;

     if (varCheck) {
         for(var fieldNum=0; fieldNum < majorsIDs.length; fieldNum++) {
             input[majorsIDs[fieldNum]].checked = varDirection;
         }
         if (varDirection) {
             varDirection = false;
         } else {
             varDirection = true;
         }
     }

The OnClick event:

[a href="javascript:\\" onClick="PreSelectMajors(document.FormMajors); 
return false;" ... ]

The Form:

	....

        [input type="checkbox" name="201" value="Yes"]
           Aeronautics<br>
        [input type="checkbox" name="202" value="Yes"]
          Architecture<br>

	....


The above script iterates through the array majorsIDs and changes the state 
of the check box for the target form element. The first time through it 
sets it to True, second time False, Third time true etc. Netscape would 
work fine, IE would blow up with an error stating object does not exist or 
property not supported.

As soon as I changed my form element's names (which were all numbers) to 
have a "A_" in front, IE worked fine.

The fixed code:

var varDirection = true;
function PreSelectMajors(input) {
     var majorsIDs = new Array('A_201');
     var varCheck = true;

     if (varCheck) {
         for(var fieldNum=0; fieldNum < majorsIDs.length; fieldNum++) {
             input[majorsIDs[fieldNum]].checked = varDirection;
         }
         if (varDirection) {
             varDirection = false;
         } else {
             varDirection = true;
         }
     }

The onClick event:

[a href="javascript:\\" onClick="PreSelectMajors(document.FormMajors); 
return false;" ... ]

The Form:

	....

        <input type="checkbox" name="A_201" value="Yes">
           Aeronautics<br>
        <input type="checkbox" name="A_202" value="Yes">
          Architecture<br>

	....

Hopefully this will help someone else spend less time on this issue than I did.

</TIP>
----
Anthony Baratta
President
Keyboard Jockeys