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: