Gecko vs IE Handling Radio Button Collections

[aCcodeMonkey]

I am reprogramming a dynamic survey tool that outputs a
database driven survey to an ASP web page and a javascript form error checking *.js file.
The original tool was designed specifically for Internet Explorer
and works quite well. I need to upgrade the service to support NS6. The tool will not support NS4.x or Opera browsers.
The problem I am expiriencing is in getting the GECKO engine to handle radio button DOM collections dynamically.
The IE code below allows for the ASP script to:

Dynamically write a javascript array containing a list of the radio buttons in the form. Determine the number of radio buttons in each collection.
For example:
Q1 has three items in the collection:
[list=1]
Yes
No
Do Not know
[/list=1]
Q2 has four items in the collection:
[list=1]
Very Satisfied
Satisfied
Unsatisfied
Very Unsatisfied
[/list=1]
Check each collection item to determine it's individual check state.
Based on the error state for the radio button collection, the code highlights or clears the previous higlight for each item in the radio button collection.

ASP Output Sample Code for IE:

<script language="javascript">
function chkForm(){
var aRadioButtons = new Array('Q1','Q3','Q6','Q11');
var errFlag=false;
Loop1:
for(nOption=0;nOption<aRadioButtons.length;nOption++){
var bChecked=false;
// Create array object for each radio button collection
var oField = document.getElementById('frmSurvey').item(aRadioButtons[nOption]);
Loop2:
for(nNode=0;nNode<oField.length;nNode++){
var bChecked=false;
// If the question is not active or has been answered exit sub loop
if ((oField[nNode].disabled)||(oField[nNode].checked)){
bChecked=true;
break Loop2;
}
}

// Set CSS based on error check results
var sClassName=((!bChecked)?'SurveyFieldsErr':'SurveyFields');
errFlag=((!bChecked)?true:false);

// Apply CSS to each object in the collection
for(nRadio=0;nRadio<oField.length;nRadio++){
oField[nRadio].className=sClassName
}
}
}
</script>

I can only get the GECKO engine to recognizes the collection if the full DOM tree is defined.
example:
document.frmSurvey.Q1[nOption].checked
document.frmSurvey.Q1[nOption].disabled

Thus, I wind up having to write one FOR LOOP for each question using radio buttons.

ASP Output Code Example For NS6:

<script language="javascript">
function chkForm(){
// Check Browser type
if(navigator.userAgent.indexOf('Netscape')!=-1){
var errFlag=false;
// Check radio button collection 1
Loop1:
for(nOption=0;nOption<2;nOption++){
var bChecked=false;
if ((document.frmSurvey.Q1[nOption].disabled)||(document.frmSurvey.Q1[nOption].checked)){
bChecked=true;
break Loop2;
}
}

// Set CSS based on error check results
var sClassName=((!bChecked)?'SurveyFieldsErr':'SurveyFields');
errFlag=((!bChecked)?true:false);

// Apply CSS to each object in the collection
for(nRadio=0;nRadio<oField.length;nRadio++){
document.frmSurvey.Q1[nOption].className=sClassName
}

// Check radio button collection 2
errFlag=false;
Loop3:
for(nOption=0;nOption<4;nOption++){
var bChecked=false;
if ((document.frmSurvey.Q2[nOption].disabled)||(document.frmSurvey.Q2[nOption].checked)){
bChecked=true;
break Loop3;
}
}

// Set CSS based on error check results
var sClassName=((!bChecked)?'SurveyFieldsErr':'SurveyFields');
errFlag=((!bChecked)?true:false);

// Apply CSS to each object in the collection
for(nRadio=0;nRadio<oField.length;nRadio++){
document.frmSurvey.Q2[nOption].className=sClassName
}
}else{

/*****************************
Insert IE code here

******************************/
}

}
</script>


Not very efficient not to mention very inelegant as

Click here to see the code in action. (http://www.thinkhdi.com/chapters/cos/survey1.asp)

Any tips or suggestions?:confused: :confused:

[aCcodeMonkey]

I've come up with a "work around". But I am still not happy.
The code below functions in both IE and NS6/7.

function chkForm(){
var errFlag=false;
// Arrays containing manditory fields
var aRadioButtons = new Array('Q1','Q3','Q5','Q8');
var aCheckBoxes = new Array('Q6');
var aTextBoxes = new Array('Q2');
var aDropDowns = new Array('Q4');
var aListBoxes = new Array('Q7');
var aTemp = new Array();

// Check Textboxes and Dropdown/Listbox objects
aTemp=aTextBoxes.concat(aDropDowns,aListBoxes);
for (i=0;i<aTemp.length;i++){
oField=document.getElementById(aTemp[i])
if ((!oField.disabled)&&((oField.value=='')||(oField.value=='#')||(oField.selectedIndex==-1))){
oField.style.backgroundColor='#EEBBBC'
errFlag=true;
}else{
oField.style.backgroundColor='#FFFFFF'
}
}
// Check Radio button Collections
oField=document.getElementById('frmSurvey').elements
nOption=0
Loop:
for(i=0;i<oField.length;i++){
var bChecked=false;
// Check object type. Only evaluate "radio" objects
if(oField.item(i).type=='radio'){
nFirstItem=i
while (oField.item(i).name==aRadioButtons[nOption]){
if((oField.item(i).disabled)||(oField.item(i).checked)){
bChecked=true;
}
i++
}
// Set CSS based on error check results and Error Flag value
sClassName=((!bChecked)?'SurveyFieldsErr':'SurveyFields1');
errFlag=((!bChecked)?true:errFlag)
for(k=nFirstItem;k<i;k++){
oField.item(k).className=sClassName
}
nOption++
if(nOption==(aRadioButtons.length-1)){
break Loop;
}
}
}
}

The issue is that the code to check the radio buttons has to loop thru the entired Forms collection. For short surveys this is not a problem. As the survey becomes more complex e.g uses many tables or spacer gifs to format the form. the complexity could slow the error checking significantly. For example the sample generated survey form linked belows has 4 radio button collections, but the form.elements collection contains 37 total elements.

Here are two examples of the code at work:
Test Form (http://www.thinkhdi.com/chapters/cos/surveys/radio_test.html)
Generated Survey (http://www.thinkhdi.com/chapters/cos/surveys/gws1.asp[/url)

Still looking for suggestions...

Dale