Web Analytics Made Easy -
StatCounter Help with Form! - CodingForum

Announcement

Collapse
No announcement yet.

Help with Form!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with Form!

    I just can't find the javascript anywhere for making radio buttons change pulldown boxes. For instance:

    Radio1: Animals
    Radio2: Cars

    If I choose Animals (radio1) the pulldownbox will contain dog, cat, bird.

    ---------------------

    If I choose Cars (radio2) the same pulldownbox will change, and contain: ferrari, volvo, ford.

    Please help!

  • #2
    This should get you started:
    Code:
    <script type="text/javascript">
     <!--//
      function loadOptions(which){
        var animals = new Array();
        var cars = new Array();
    
            animals[0]=new Option('Cats','Cats');
            animals[1]=new Option('Dogs','Dogs');
            animals[2]=new Option('Pigs','Pigs');
    
            cars[0]=new Option('Buick','Buick');
            cars[1]=new Option('Chevy','Chevy');
            cars[2]=new Option('Olds','Olds');
    
       if(which.value=="animals"){myOptions = animals};
       if(which.value=="cars"){myOptions = cars};
        for(i=0;i<myOptions.length;i++){
          document.form1.menu.options[i] = myOptions[i];
        }
      }
     //-->
    </script>
    <form name="form1">
    <input type="radio" value="animals" name="optMenu" checked onclick="loadOptions(this)">Animals<br>
    <input type="radio" value="cars" name="optMenu" onclick="loadOptions(this)">Cars<br>
    
    
    <select name="menu">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
    <option value="Pigs">Pigs</option>
    </select>
    .....Willy

    Comment


    • #3
      ohh man, I'm REALLY thankful, just in time.
      appreciated it mate

      Comment


      • #4
        Your Welcome;

        FWIW: Here's another way without the radio buttons.
        Code:
        <script type="text/javascript">
         <!--//
          function loadOptions(which){
            var theOptions = document.form1.menu; // FORM NAME //;
            var main = new Array();
                main[0]=new Option('Pick A Subject','');
                main[1]=new Option('Animals','animals');
                main[2]=new Option('Cars','cars');
        
            var animals = new Array();
                animals[0]=new Option('Pick An Animal','');
                animals[1]=new Option('Cats','cats');
                animals[2]=new Option('Dogs','dogs');
                animals[3]=new Option('Pigs','pigs');
                animals[4]=new Option('Return To Main Menu','main');
        
            var cars = new Array();
                cars[0]=new Option('Pick A Car','');
                cars[1]=new Option('Buick','buick');
                cars[2]=new Option('Chevy','chevy');
                cars[3]=new Option('Olds','olds');
                cars[4]=new Option('Return To Main Menu','main');
        
           if(which == 'main')    {myOptions = main};
           if(which == 'animals') {myOptions = animals};
           if(which == 'cars')    {myOptions = cars};
        
             for(j=theOptions.length; j>myOptions.length-1; j--){
               if(theOptions.length > myOptions.length){
                  for(i=0; i<myOptions.length; i++){
                      theOptions[i] = myOptions[i];
                      theOptions[j] = null;
                  }
               }
             }
        
               if(myOptions.length > theOptions.length){
                 for(i=0; i<myOptions.length; i++){
                     theOptions[i] = myOptions[i];
                 }
               }
        
          }
         //-->
        </script>
        </HEAD>
        
        
        <BODY onload="loadOptions('main')">
        <form name="form1">
        <select name="menu" onchange="loadOptions(this[this.selectedIndex].value)"></select>
        .....Willy

        Comment

        Working...
        X