dynamic html forms radio buttons

I am working on a dynamic form. The form has 3 radio buttons.

when you click on radio button 1, a drop down populates. when you click on radio button 2, a drop down populates. etc
after the user has clicked on the radio button on part 1, there is another radio button that asks the user if they want another try. eg. another radio button yes or no; if the user clicks on no, nothing happens, however if the user clicks on yes, the remaining radio buttons from part 1 populates.

eg. in part 1 i have 3 radio buttons like this: radio1, radio2, radio3

i click on radio1 in part 1, then in part 2 i have only two radio buttons left if i click "yes": radio2, radio 3. and by clicking radio2, a drop down populates.

I have the code, below. the problem i am having is, the radio button states doesn't stay it keeps shifting around. also, i cannot seem to submit the values for any of the radio buttons or the drop down. it's working, but in a wierd way:-)

your help is much appreciated.

<html>
    <head>
<script type="text/javascript">
     var comList= new Array("apple","banana","mango");
     var list = new Array("orange", "apricot");
     var list2 = new Array("orange", "pear","grapes","prune");
     var list3 = new Array("oragne", "green beans","onions");    
     var val1selected = 0;  

     //create drop down menus
     function loadDropDown(option)
     {
         setSelectdVal(option)
         createDropDown(option)
     } 

     function loadDropDown2(option)
     {
         setSelectdVal(option)
         createDropDown2(option)
     }
     function setSelectdVal(option)
     {
         if (option == 1)
         {
           val1selected = 1; 
         } 
     }       
     function createDropDown(option)
     {
        html = "";
        html = html + '<select id="id">'
        var arr = getArray(option);
        for (var i=arr.length-1; i>=0; --i )
        {
            html = html + '<option value="' + i + '">' + arr[i] + '</option>' 
        }
        html = html + '</select>'
        document.getElementById('selectTag').innerHTML = html;
     }   
     function createDropDown2(option)
     {
        html = "";
        html = html + '<select id="id">'
        var arr = getArray(option);
        for (var i=arr.length-1; i>=0; --i )
        {
            html = html + '<option value="' + i + '">' + arr[i] + '</option>' 
        }
        html = html + '</select>'
        document.getElementById('selectTag2').innerHTML = html;
     }



     //create radio buttons  
    function loadRadioButtons()
    {
      for (var i=0; i < document.orderform.optis.length; i++)
      {
        if (document.orderform.optis[i].checked)
        {

          if(document.orderform.optis[i].value == "value1")
          {
            //show val2 and val3 radio buttons
            html = "";
            html = html + '<input type="radio" name="optis" onClick="loadDropDown2(2);" value="value2"> value2';
            html = html + '<input type="radio" name="optis" onClick="loadDropDown2(3);" value="value3"> value3';
            document.getElementById('radioTag').innerHTML = html;
          }
          if(document.orderform.optis[i].value == "value2")
          {
            //show val1 and val3 radio buttons
            html = "";
            html = html + '<input type="radio" name="optis" onClick="loadDropDown2(1);" value="value1"> value1';
            html = html + '<input type="radio" name="optis" onClick="loadDropDown2(3);" value="value3"> value3';
            document.getElementById('radioTag').innerHTML = html;
          }
          if(document.orderform.optis[i].value == "value3")
          {
            //show val1 and val2 radio buttons
            html = "";
            html = html + '<input type="radio" name="optis" onClick="loadDropDown2(1);" value="value1"> value1';
            html = html + '<input type="radio" name="optis" onClick="loadDropDown2(2);" value="value2"> value2';
            document.getElementById('radioTag').innerHTML = html;
          }

        }
      }
    }

     //array list for drop down menus
     function getArray(option)
     {
        var a = comList;
        if ((option == 2) && (val1selected == 0))
        {
           a = list //comList.concat(list)
        }
        if ((option == 3) && (val1selected == 0))
        {
           a = list2 //comList.concat(list)
        }
        return a;
     }
</script>
</head>
<body>
<form name="orderform">
  <table>
    <tr>
    <td><input type="radio" name="optis" onClick="loadDropDown(1);" value="value1">value1</td>
    <td><input type="radio" name="optis" onClick="loadDropDown(2);" value="value2">value2</td>
    <td><input type="radio" name="optis" onClick="loadDropDown(3);" value="value3">value3</td>
    </tr>

    <tr>
    <td></td>
    <td id="selectTag"></td>
    </tr>

    <tr>
    <td align="right">City:</td><td><input name="city" value="" type="text" size="8"/></td>
    </tr>

    <tr>
    <td align="right">Another Category:</td>
    <td>
    <input type="radio" name="another_cat" onClick="loadRadioButtons();" value="Yes">Yes
    <input type="radio" name="another_cat" value="No">No
    </td>
    </tr>

    <tr>
    <td></td>
    <td id="radioTag"></td>
    </tr>   

    <tr>
    <td></td>
    <td id="selectTag2"></td>
    </tr>


  </table>
  <input type="submit">
</form>
</body> 
</html>

ansaurus

tags:

views:

answers:

dynamic html forms radio buttons

related questions