Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Gecko vs IE Handling Radio Button Collections

    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:
    [list][*]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:
    1. Very Satisfied
    2. Satisfied
    3. Unsatisfied
    4. Very Unsatisfied[/list=1]
    5. Check each collection item to determine it's individual check state.
    6. 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:
    Code:
    <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:
    Code:
    <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.

    Any tips or suggestions?
    Last edited by aCcodeMonkey; 09-20-2002 at 04:01 PM.

  • #2
    New Coder
    Join Date
    Sep 2002
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question RE Gecko Vs. IE

    I've come up with a "work around". But I am still not happy.
    The code below functions in both IE and NS6/7.
    Code:
    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
    Generated Survey

    Still looking for suggestions...

    Dale


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •