Web Analytics Made Easy -
StatCounter multiple dynamic dropdowns - CodingForum

Announcement

Collapse
No announcement yet.

multiple dynamic dropdowns

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

  • multiple dynamic dropdowns

    I've been trying to create a page with two forms that have drop downs in them. These drop downs are set to store information from the previous drop down and I can get one to work easliy but having two forms has got me stopped in my tracks. I'm new to this and new to the forums so any help is apeciated. Just go easy on me. heh!

    Under the function where it says

    function setOptions(chosen,theform) {
    var selbox = document.theform.opttwo;


    I tried changing 'theform' to 'myform1' and so forth but neither worked.


    Thanks again for your time and effort in helping me! Here's my code:

    Code:
    <html>
    <head>
    <SCRIPT TYPE="text/javascript">
    <!--
    function setOptions(chosen,theform) {
    var selbox = document.theform.opttwo;
    selbox.options.length = 0;
    if (chosen == " ") {
      selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
     
    }
    if (chosen == "1") {
      selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
      selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
    }
    if (chosen == "2") {
      selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
      selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
    }
    if (chosen == "3") {
      selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
      selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
    }
    }
    //-->
    </SCRIPT>
    </head>
    <body link="#000066" vlink="#999999" alink="#FFFF00">
    <table width="40%" height="447" border="0">
      <tr> 
        <td><div align="left"><img src="images/topbar.jpg" width="740" height="29" border="0" usemap="#Map"></div></td>
      </tr>
      <tr> 
        <td height="332"> <p align="left">&nbsp;</p>
          <div align="left"> 
            <table width="740" height="187" border="0" align="left">
              <tr> 
                <td height="97" colspan="2"> <div align="center"></td>
              </tr>
              <tr> 
                <td width="49%" height="21"> <div align="center"><strong>Form One</strong></div></td>
                <td width="51%"> <div align="center"><strong>Form Two</strong></div></td>
              </tr>
              <tr> 
                <td height="47"><form name="myform1">
                    <div align="center"> 
                      <p> 
                        <select name="optone" size="1"
    onchange="setOptions(document.myform1.optone.options[document.myform1.optone.selectedIndex].value,"myform1");">
                          <option value=" " selected="selected"> </option>
                          <option value="1">First Choice</option>
                          <option value="2">Second Choice</option>
                          <option value="3">Third Choice</option>
                        </select>
                        <br>
                        <br />
                        <select name="opttwo" size="1">
                          <option value=" " selected="selected">Please select one 
                          of the options above first</option>
                        </select>
                        <br>
                        <br />
                        <input type="submit" name="go" value="Submit"
    onclick="alert(document.myform1.opttwo.options[document.myform1.opttwo.selectedIndex].value);">
                      </p>
                    </div>
                  </form></td>
                <td><form name="myform2">
                    <div align="center"> 
                      <p> 
                        <select name="optone" size="1"
    onchange="setOptions(document.myform2.optone.options[document.myform2.optone.selectedIndex].value,"myform2");">
                          <option value=" " selected="selected"> </option>
                          <option value="1">First Choice</option>
                          <option value="2">Second Choice</option>
                          <option value="3">Third Choice</option>
                        </select>
                        <br>
                        <br />
                        <select name="opttwo" size="1">
                          <option value=" " selected="selected">Please select one 
                          of the options above first</option>
                        </select>
                        <br>
                        <br />
                        <input type="submit" name="go" value="Submit"
    onclick="alert(document.myform2.opttwo.options[document.myform2.opttwo.selectedIndex].value);">
                      </p>
                    </div>
                  </form></td>
              </tr>
            </table>
          </div>
          <p align="left">&nbsp;</p>
          <p align="left">&nbsp;</p></td>
      </tr>
      <tr> 
        <td bgcolor="#FFFFFF"><div align="left"><img src="images/bottombar.jpg" width="740" height="16"></div></td>
      </tr>
      <tr> 
        <td height="56"> <div align="center"></td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by sdf0626; Apr 2, 2009, 01:39 PM.

  • #2
    You normally use the format
    Code:
    document.FORMNAME.FIELDNAME
    to access a given field in a given form.

    So:
    Code:
    function setOptions(chosen) /* notice only ONE argument */
    {
        var selbox = document.myform1.opttwo;
        ...
    BUT...

    But you *could* also pass the form BY REFERENCE from the onChange:
    Code:
    <select name="optone" size="1" onchange="setOptions(this.options[this.selectedIndex].value, this.form);">
    Do *NOT* forget about the keyword this !! It always refers to the object that contains the relevant JS code, in this case the <select>. And all form fields have a .form property that gets, what else, a reference to their containing form. So, if you use the above, you would just do:
    Code:
    function setOptions(chosen,form) /* notice now two arguments */
    {
        var selbox = form.opttwo;
        ...
    My own preference is to *only* pass the reference to the <select> and let the JS function do all the rest.

    Thus:
    Code:
    <select name="optone" size="1" onchange="setOptions(this);">
    
    and then
    
    function setOptions( sel )
    {
        var form = sel.form;
        var chosen = sel.options[sel.selectedIndex].value;
    
        var selbox = form.opttwo;
        ...
    But that's strictly personal preference.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Thanks for the reply and I'll give it a try. Still not sure why my code isn't working because if I remove one of the forms it works fine with just one form.

      I'm going to try and see what I can get to work. heh!

      Comment


      • #4
        Ok, so I had no luck with the help you gave me so I took it back to the basics. Here is my code of the working form I'm trying to duplicate on the same html page. I'm wanting two of these forms but with different options on each form within one html page.

        Code:
        <html>
        <head>
        <SCRIPT TYPE="text/javascript">
        <!--
        function setOptions(chosen) {
        var selbox = document.myform1.opttwo;
         
        selbox.options.length = 0;
        if (chosen == " ") {
          selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
         
        }
        if (chosen == "1") {
          selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
          selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
        }
        if (chosen == "2") {
          selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
          selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
        }
        if (chosen == "3") {
          selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
          selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
        }
        }
        //-->
        </SCRIPT>
        </head>
        <body>
        
        <form name="myform1"><div align="center">
                          <p>
                            <select name="optone" size="1"
        onchange="setOptions(document.myform1.optone.options[document.myform1.optone.selectedIndex].value);">
                              <option value=" " selected="selected"> </option>
                              <option value="1">First Choice</option>
                              <option value="2">Second Choice</option>
                              <option value="3">Third Choice</option>
                            </select>
                            <br />
                            <br />
                            <select name="opttwo" size="1">
                              <option value=" " selected="selected">Please select one 
                              of the options above first</option>
                            </select>
                          </p>
                          <p> 
                            <input type="button" name="go" value="Submit"
        onclick="alert(document.myform1.opttwo.options[document.myform1.opttwo.selectedIndex].value);">
                          </p>
                        </div></form>
        </body>
        </html>
        This works just like I want it to but for the life of me I can't get two forms on the same html with different options to work. Again, thanks for the time and help in advance!

        One tutorial I've found on the subject suggests this:

        To adapt the script for use in multiple forms on the same page amend the setOptions calls in the html to pass the form name as a second parameter eg:


        Code:
        setOptions(document.form1.optone.options[document..form1.optone.selectedIndex].value,"form1");
        You then amend the code at the top of the javascript to read as follows


        Code:
        function setOptions(chosen,theform) {
        var selbox = document.theform.opttwo;
        This then uses the one function to populate the dynamic lists for each of the dropdowns making it easy to share the content between the dropdowns if required.

        I tried this in my first post but to no avail. I'm probably just entering it wrong but I can't see where?
        Last edited by sdf0626; Apr 2, 2009, 01:52 PM.

        Comment


        • #5
          Consider this ...

          Could you use something like this?

          Note: alert() messages for testing purposes only.

          Code:
          <html>
          <head>
          <title>Dual Form Selections</title>
          <script type="text/javascript">
          // From: http://codingforum.net/showthread.php?t=162808
          
          	var fm = ['|-- Forms --','|Main Form1','|Main Form2'];
          	var f1 = ['|-- Mammal Examples --','123|Whale','456|Mouse','789|Man'];
                 var f2 = ['|-- Bird Examples --','|Sparrow','|Woodpecker'];
          
          function choice(IDS,t){
          	s = document.getElementById(IDS);
          	for (var i = s.options.length; i >= 0 ; i--) { s.options[i] = null; }
          	var z = [];
          	switch (t) {
                    case '0' : return; break; // z = fm; break; // alternative display
          	  case '1' : z = f1; break;
          	  case '2' : z = f2; break;
          	  default : alert('Invalid entry: '+IDS+' : '+t+'\n\n'+z); break;
          	}
          	var tmp = [];
          	for (i = 0; i < z.length; i++ ) {
                    tmp = z[i].split('|')
                    if (tmp[0] == '') { tmp[0] = tmp[1]; }  // puts something into value other than ''
                    s.options[i] = new Option(tmp[1],tmp[0],false,false);
                  }
          }
          
          function validate1() {
            if (document.getElementById('MainSelect').selectedIndex == 1) { return true; } else { return false; }
          }
          function validate2() {
            if (document.getElementById('MainSelect').selectedIndex == 2) { return true; } else { return false; }
          }
          function ShowDIV(info) {
            if (info == '0') {
              document.getElementById('form2').style.display = 'none';
              document.getElementById('form1').style.display = 'none';
              return;
            }
            if (info == '1') {
              document.getElementById('form2').style.display = 'none';
              document.getElementById('form1').style.display = 'block';
            }
            if (info == '2') {
              document.getElementById('form1').style.display = 'none';
              document.getElementById('form2').style.display = 'block';
            }
          }
          </script>
          </head>
          <body>
          
          <SELECT id="MainSelect"
           onChange="ShowDIV(this.value);choice('OptionSelect',this.value)">
           <option value="0">-- Select Form --</option>
           <option value="1">Form 1</option>
           <option value="2">Form 2</option>
          </SELECT>
          
          <!-- onChange alert() below only for testing purposes -- not needed -->
          <SELECT id="OptionSelect" onChange="alert('Value: '+this.value)"></SELECT>
          
          <div id="form1" style="display:none">
           <form name="myform1"
            action="javascript:alert('Form 1: '+document.getElementById('OptionSelect').value)" onsubmit="return validate1()">
            <input type="submit" value="Submit Form 1">
           </form>
          </div>
          
          <div id="form2" style="display:none">
           <form name="myform2"
            action="javascript:alert('Form 2: '+document.getElementById('OptionSelect').value)" onsubmit="return validate2()">
            <input type="submit" value="Submit Form 2">
           </form>
          </div>
          
          </body>
          </html>

          Comment


          • #6
            I think I could make it work with this! Thanks jmrker!

            Comment


            • #7
              You're most welcome.
              Glad I was able to help.
              Let me know if you have any problems.
              Good Luck!

              Comment


              • #8
                Version 2 ...

                Per your PM, here's a version that uses three drop down select boxes rather than only two. I posted it here in case some other forum members could use the modified code.

                Code:
                <html>
                <head>
                <title>Dual Form Selections</title>
                <script type="text/javascript">
                // From: http://codingforum.net/showthread.php?t=162808
                
                	var fm = ['0|-- Forms --','fs1|Main Form1','fs2|Main Form2'];
                	
                	var fs1 = ['0|States','fn1|Indiana','fn2|Kentucky','fn3|North Carolina'];
                	var fs2 = ['0|States','fn4|Florida','fn5|Minesota','fn6|Tennessee'];
                	
                	var fn1= ['|Bob','|Mary','|John'];
                	var fn2= ['|Earl','|Joseph','|Tom'];
                	var fn3= ['|John','|Jacob','|Jingle-Heimer','|Smith'];
                	var fn4= ['|Mark','|Mel','|Mike','|Melanie'];
                	var fn5= ['|Roy','|Robert','|Ron'];
                	var fn6= ['|Claire','|Carla','|Connie','|Cora'];
                	
                function choice(IDS,t){
                	s = document.getElementById(IDS);
                	for (var i = s.options.length; i >= 0 ; i--) { s.options[i] = null; }
                	var z = [];
                	switch (t) {
                //      case '0' : return; break;
                      case '0' : z = fm; break;
                      
                	  case 'fs1' : z = fs1; break;
                	  case 'fs2' : z = fs2; break;
                	  
                	  case 'fn1' : z = fn1; break;
                	  case 'fn2' : z = fn2; break;
                	  case 'fn3' : z = fn3; break;
                	  case 'fn4' : z = fn4; break;
                	  case 'fn5' : z = fn5; break;
                	  case 'fn6' : z = fn6; break;
                	  
                	  default : alert('Invalid entry: '+IDS+' : '+t+'\n\n'+z); break;
                	}
                	var tmp = [];
                	for (i = 0; i < z.length; i++ ) {
                          tmp = z[i].split('|')
                          if (tmp[0] == '') { tmp[0] = tmp[1]; }  // puts something into value other than ''
                          s.options[i] = new Option(tmp[1],tmp[0],false,false);
                        }
                }
                
                function validate1() {
                  if (document.getElementById('FormSelect').selectedIndex == 1) {
                    return CurrentSelections();
                //    return true; 
                  } else { return false; }
                }
                function validate2() {
                  if (document.getElementById('FormSelect').selectedIndex == 2) {
                    return CurrentSelections();
                //    return true; 
                  } else { return false; }
                }
                function ShowDIV(info) {
                  if (info == '0') {
                    document.getElementById('form2').style.display = 'none';
                    document.getElementById('form1').style.display = 'none';
                    return;
                  }
                  if (info == 'fs1') {
                    document.getElementById('form2').style.display = 'none';
                    document.getElementById('form1').style.display = 'block';
                  }
                  if (info == 'fs2') {
                    document.getElementById('form1').style.display = 'none';
                    document.getElementById('form2').style.display = 'block';
                  }
                }
                
                function CurrentSelections() {
                /* For value portion of option
                  var str = 'Form '+ document.getElementById('FormSelect').value+' : ';
                      str += 'State '+document.getElementById('StateSelect').value+' : ';	
                      str += 'Name '+document.getElementById('NameSelect').value;	
                /* */
                /* For text portion of option */
                  var sel = document.getElementById('FormSelect');
                  var str = 'Form:'+ sel.options[sel.selectedIndex].text+', ';
                      sel = document.getElementById('StateSelect');
                      str += 'State:'+ sel.options[sel.selectedIndex].text+', ';
                      sel = document.getElementById('NameSelect');
                      str += 'Name:'+ sel.options[sel.selectedIndex].text;
                /* */
                  alert(str);
                  return false;
                }
                </script>
                </head>
                <body onload="choice('FormSelect','0')">
                
                <SELECT id="FormSelect"
                 onChange="ShowDIV(this.value);choice('StateSelect',this.value)"></SELECT>
                <!-- alternate to "onLoad=" setup
                 <option value="0">-- Select Form --</option>
                 <option value="fs1">Form 1</option>
                 <option value="fs2">Form 2</option>
                </SELECT>
                -->
                
                <SELECT id="StateSelect"
                 onChange="ShowDIV(this.value);choice('NameSelect',this.value)">
                 
                <!-- onChange alert() below only for testing purposes -- not needed -->
                <SELECT id="NameSelect"></select>
                <!-- SELECT id="NameSelect"> onChange="alert('Value: '+this.value)"></SELECT -->
                
                <p>
                <div id="form1" style="display:none">
                 <form name="myform1" action="javascript:alert('Success')" onsubmit="return validate1()">
                 <input type="submit" value="Submit Form 1">
                 </form>
                </div>
                
                <div id="form2" style="display:none">
                 <form name="myform2" action="javascript:alert('Success')" onsubmit="return validate2()">
                 <input type="submit" value="Submit Form 2">
                 </form>
                </div>
                
                </body>
                </html>
                I left some <!-- comments --> and /* comments */ in so you could see some alternatives.

                Post back if you have questions.

                Good Luck!

                Comment


                • #9
                  This works great but one last question I have is how would I redirect the user if say they chose bob, mary, or john? For example: If they chose Bob and then hit submit I would want to take them to Bob's page and if they chose Mary's then they would redirect on sumbit to Mary's page and so on. Where do I add the links for redirection in this setup?

                  Thanks in advance and I apreciate the help!

                  Comment


                  • #10
                    Clarification please ...

                    Originally posted by sdf0626 View Post
                    This works great but one last question I have is how would I redirect the user if say they chose bob, mary, or john? For example: If they chose Bob and then hit submit I would want to take them to Bob's page and if they chose Mary's then they would redirect on sumbit to Mary's page and so on. Where do I add the links for redirection in this setup?

                    Thanks in advance and I apreciate the help!
                    I don't understand the request.

                    The original post asked to submit to two different forms the information from several different drop down contents.

                    Now you want to redirect based upon the selections AND submit the information?

                    Those actions are incompatible. You can do one or the other, but not both at the same time.

                    Please clarify.

                    Current version has the set-up to send the selected informtion when submit button is clicked.

                    Modifications will be required to redirect based upon input of selections.

                    Comment


                    • #11
                      Modifications will be required to redirect based upon input of selections.
                      I want to send them to a different page 'on submit' depending on the selection. I have pages made for each selection
                      var fn1= ['|Bob','|Mary','|John'];
                      var fn2= ['|Earl','|Joseph','|Tom'];
                      var fn3= ['|John','|Jacob','|Jingle-Heimer','|Smith'];
                      var fn4= ['|Mark','|Mel','|Mike','|Melanie'];
                      var fn5= ['|Roy','|Robert','|Ron'];
                      var fn6= ['|Claire','|Carla','|Connie','|Cora'];
                      and I don't really need to store the info. selected but rather make sure the selection goes to their page.

                      Sorry for the confusion and as always I am greatful!

                      Comment


                      • #12
                        Consider these changes ...

                        Something like this?
                        Code:
                        <html>
                        <head>
                        <title>Dual Form Selections</title>
                        <script type="text/javascript">
                        // From: http://codingforum.net/showthread.php?t=162808
                        
                        	var fm = ['0|-- Forms --','fs1|Main Form1','fs2|Main Form2'];
                        	
                        	var fs1 = ['0|States','fn1|Indiana','fn2|Kentucky','fn3|North Carolina'];
                        	var fs2 = ['0|States','fn4|Florida','fn5|Minesota','fn6|Tennessee'];
                        	
                        	var fn1= ['URL000|Bob',   'URL001|Mary',  'URL002|John'];
                        	var fn2= ['URL100|Earl',  'URL101|Joseph','URL102|Tom'];
                        	var fn3= ['URL200|John',  'URL201|Jacob', 'URL202|Jingle-Heimer','URL203|Smith'];
                        	var fn4= ['URL300|Mark',  'URL301|Mel',   'URL302|Mike',         'URL303|Melanie'];
                        	var fn5= ['URL400|Roy',   'URL401|Robert','URL402|Ron'];
                        	var fn6= ['URL500|Claire','URL501|Carla', 'URL502|Connie',       'URL503|Cora'];
                        	
                        function choice(IDS,t){
                        	s = document.getElementById(IDS);
                        	for (var i = s.options.length; i >= 0 ; i--) { s.options[i] = null; }
                        	var z = [];
                        	switch (t) {
                        //          case '0' : return; break;
                                  case '0' : z = fm; break;
                              
                        	  case 'fs1' : z = fs1; break;
                        	  case 'fs2' : z = fs2; break;
                        	  
                        	  case 'fn1' : z = fn1; break;
                        	  case 'fn2' : z = fn2; break;
                        	  case 'fn3' : z = fn3; break;
                        	  case 'fn4' : z = fn4; break;
                        	  case 'fn5' : z = fn5; break;
                        	  case 'fn6' : z = fn6; break;
                        	  
                        	  default : alert('Invalid entry: '+IDS+' : '+t+'\n\n'+z); break;
                        	}
                        	var tmp = [];
                        	for (i = 0; i < z.length; i++ ) {
                                  tmp = z[i].split('|')
                                  if (tmp[0] == '') { tmp[0] = tmp[1]; }  // puts something into value other than ''
                                  s.options[i] = new Option(tmp[1],tmp[0],false,false);
                                }
                        }
                        
                        function validate1() {
                          if (document.getElementById('FormSelect').selectedIndex == 1) {
                            return CurrentSelections();
                        //    return true; 
                          } else { return false; }
                        }
                        function validate2() {
                          if (document.getElementById('FormSelect').selectedIndex == 2) {
                            return CurrentSelections();
                        //    return true; 
                          } else { return false; }
                        }
                        function ShowDIV(info) {
                          if (info == '0') {
                            document.getElementById('form2').style.display = 'none';
                            document.getElementById('form1').style.display = 'none';
                            return;
                          }
                          if (info == 'fs1') {
                            document.getElementById('form2').style.display = 'none';
                            document.getElementById('form1').style.display = 'block';
                          }
                          if (info == 'fs2') {
                            document.getElementById('form1').style.display = 'none';
                            document.getElementById('form2').style.display = 'block';
                          }
                        }
                        
                        function CurrentSelections() {
                        /* For value portion of option */
                          var str = 'Form '+ document.getElementById('FormSelect').value+' : ';
                              str += 'State '+document.getElementById('StateSelect').value+' : ';	
                              str += 'Name '+document.getElementById('NameSelect').value;	
                        /* */
                        /* For text portion of option 
                          var sel = document.getElementById('FormSelect');
                          var str = 'Form:'+ sel.options[sel.selectedIndex].text+', ';
                              sel = document.getElementById('StateSelect');
                              str += 'State:'+ sel.options[sel.selectedIndex].text+', ';
                              sel = document.getElementById('NameSelect');
                              str += 'Name:'+ sel.options[sel.selectedIndex].text;
                        /* */
                          alert(str);
                          return false;
                        }
                        </script>
                        </head>
                        <body onload="choice('FormSelect','0')">
                        
                        <SELECT id="FormSelect"
                         onChange="ShowDIV(this.value);choice('StateSelect',this.value)"></SELECT>
                        <!-- alternate to "onLoad=" setup
                         <option value="0">-- Select Form --</option>
                         <option value="fs1">Form 1</option>
                         <option value="fs2">Form 2</option>
                        </SELECT>
                        -->
                        
                        <SELECT id="StateSelect"
                         onChange="ShowDIV(this.value);choice('NameSelect',this.value)">
                         
                        <!-- onChange alert() below only for testing purposes -- not needed -->
                        <SELECT id="NameSelect"></select>
                        <!-- SELECT id="NameSelect"> onChange="alert('Value: '+this.value)"></SELECT -->
                        
                        <p>
                        <div id="form1" style="display:none">
                         <form name="myform1" action="javascript:alert('Success')" onsubmit="return validate1()">
                         <input type="submit" value="Submit Form 1">
                         </form>
                        </div>
                        
                        <div id="form2" style="display:none">
                         <form name="myform2" action="javascript:alert('Success')" onsubmit="return validate2()">
                         <input type="submit" value="Submit Form 2">
                         </form>
                        
                        </div>
                        
                        </body>
                        </html>
                        1. Substitute your URL addresses for the appropriate people in the 'f??' arrays.
                        2. Alter the alert message to do the form acitons.

                        Comment


                        • #13
                          Hey jmrker I need you again! heh!

                          So, I finally got the multiple dropdowns with redirection working and posted on my site.


                          Here is the code draft 1:
                          Code:
                          <html>
                          <head>
                          <title> Office location and Employee
                          </title>
                          <script langauge="javascript" type="text/javascript">
                          <!--
                          var navTree = new Array(
                            new Array("nav_book", new Array(
                              new Array(/*Section 1*/
                                new Array("page1.html", "JP"),
                                new Array("page1.html", "Greg"),
                                new Array("page3.html", "Myong"),
                          	  new Array("page4.html", "Judd"),
                          	  new Array("page5.html", "Tim")
                              ),/*end Seciton 1*/
                              new Array(/*Section 2*/
                                new Array("page4.html", "Ayana"),
                          	  new Array("page4.html", "Marja")
                              ),/*end Section 2*/
                              new Array(/*Section 3*/
                                new Array("page5.html", "Tom"),
                                new Array("page6.html", "Ben"),
                          	  new Array("page4.html", "Roy"),
                          	  new Array("page4.html", "Kevin"),
                          	  new Array("page4.html", "Michael"),
                          	  new Array("page4.html", "Frank")
                              ),/*end Section 3*/
                          	new Array(/*Section 4*/
                                new Array("page5.html", "Jennifer"),
                                new Array("page6.html", "Shelly"),
                          	  new Array("page4.html", "Laura")
                              ),/*end Section 4*/
                          	new Array(/*Section 5*/
                                new Array("page5.html", "Rene"),
                                new Array("page6.html", "Emily"),
                          	  new Array("page4.html", "Jeff"),
                          	  new Array("page4.html", "Denise")
                              ),/*end Section 5*/
                          	new Array(/*Section 6*/
                                new Array("page5.html", "Rich"),
                                new Array("page6.html", "Jennifer"),
                          	  new Array("page4.html", "Rich"),
                          	  new Array("page4.html", "Anthony")
                              ),/*end Section 6*/
                          	new Array(/*Section 7*/
                                new Array("page5.html", "JP Davis"),
                                new Array("page6.html", "Sue Stotle"),
                          	  new Array("page4.html", "Prebble"),
                          	  new Array("page4.html", "Penny")
                              ),/*end Section 7*/
                          	new Array(/*Section 8*/
                                new Array("page5.html", "Dan")
                              )/*end Section 8*/
                            )),/*end nav_book*/
                            new Array("nav_plants", new Array(
                               new Array(/*Section 1*/
                                new Array("page1.html", "JP"),
                                new Array("page1.html", "Greg"),
                                new Array("page3.html", "Myong"),
                          	  new Array("page4.html", "Judd"),
                          	  new Array("page5.html", "Tim")
                              ),/*end Seciton 1*/
                              new Array(/*Section 2*/
                                new Array("page4.html", "Ayana"),
                          	  new Array("page4.html", "Marja")
                              ),/*end Section 2*/
                              new Array(/*Section 3*/
                                new Array("page5.html", "Tom"),
                                new Array("page6.html", "Ben"),
                          	  new Array("page4.html", "Roy"),
                          	  new Array("page4.html", "Kevin"),
                          	  new Array("page4.html", "Michael"),
                          	  new Array("page4.html", "Frank")
                              ),/*end Section 3*/
                          	new Array(/*Section 4*/
                                new Array("page5.html", "Jennifer"),
                                new Array("page6.html", "Shelly"),
                          	  new Array("page4.html", "Laura")
                              ),/*end Section 4*/
                          	new Array(/*Section 5*/
                                new Array("page5.html", "Rene"),
                                new Array("page6.html", "Emily"),
                          	  new Array("page4.html", "Jeff"),
                          	  new Array("page4.html", "Denise")
                              ),/*end Section 5*/
                          	new Array(/*Section 6*/
                                new Array("page5.html", "Rich"),
                                new Array("page6.html", "Jennifer"),
                          	  new Array("page4.html", "Rich"),
                          	  new Array("page4.html", "Anthony")
                              ),/*end Section 6*/
                          	new Array(/*Section 7*/
                                new Array("page5.html", "JP Davis"),
                                new Array("page6.html", "Sue Stotle"),
                          	  new Array("page4.html", "Prebble"),
                          	  new Array("page4.html", "Penny")
                              ),/*end Section 7*/
                          	new Array(/*Section 8*/
                                new Array("page5.html", "Dan")
                              )/*end Section 8*/
                            ))/*end nav_palnts*/
                          );
                          function FindNavFormIndex(formName) {
                          var i;
                            for (i = 0; i < navTree.length; i++) {
                              if (navTree[i][0] == formName) { return i; }
                            }
                          return -1;
                          }
                          
                          function navFormSubmit(formName) {
                          var pb = eval("document."+formName+".page");
                            if (pb) {
                            var url = pb.options[pb.selectedIndex].value;
                              if (url != "#") { document.location = url; }
                            }
                          return false;
                          }
                          
                          function navFormSectionChanged(formName) {
                          var form = eval("document."+formName);
                          var sb = form.section;
                          var pb = form.page;
                          var index = FindNavFormIndex(formName);
                            if (sb && pb && (index != -1)) {
                            var section_index = sb.options[sb.selectedIndex].value;
                              if (section_index != -1) {
                              var pages = navTree[index][1][section_index];
                              var i;
                              pb.options.length = 0;
                                for (i = 0; i < pages.length; i++) {
                                /*make next option with value as URL*/
                                pb.options[pb.options.length] = new Option(pages[i][1],pages[i][0]);
                          //      pb.options[pb.options.length].value = pages[i][0];
                                }/*end population loop*/
                              }/*end section value check*/
                            }/*end HTML check*/
                          }/*end function*/
                          -->
                          </script>
                          </head>
                          <body>
                          <form name="nav_book" onsubmit="return false">
                          <select name="section" onchange="navFormSectionChanged('nav_book')">
                          <option value="-1">- Select Office -</option>
                          <option value="0">Kentucky -Louisville/Shelbyville Rd.</option>
                          <option value="1">Kentucky -Louisville/Hurstbourne Ln.</option>
                          <option value="2">Kentucky -Louisville/Springhurst</option>
                          <option value="3">Kentucky -Bardstown</option>
                          <option value="4">Indiana -Carmel</option>
                          <option value="5">Indiana -Martinsville</option>
                          <option value="6">Tennessee</option>
                          <option value="7">Florida and Dan</option>
                          </select>
                          <select name="page">
                          <option value="#"></option>
                          </select>
                          <input type="button" value="Submit" onclick="navFormSubmit('nav_book')">
                          </form>
                          <form name="nav_plants" onsubmit="return false;">
                          <select name="section" onchange="navFormSectionChanged('nav_plants')">
                          <option value="-1">- Select Office -</option>
                          <option value="0">Kentucky -Louisville/Shelbyville Rd.</option>
                          <option value="1">Kentucky -Louisville/Hurstbourne Ln.</option>
                          <option value="2">Kentucky -Louisville/Springhurst</option>
                          <option value="3">Kentucky -Bardstown</option>
                          <option value="4">Indiana -Carmel</option>
                          <option value="5">Indiana -Martinsville</option>
                          <option value="6">Tennessee</option>
                          <option value="7">Florida and Dan</option>
                          </select>
                          <select name="page">
                          <option value="#"></option>
                          </select>
                          <input type="button" value="Submit" onclick="navFormSubmit('nav_plants')">
                          </form>
                          </body>
                          </html>
                          Last edited by sdf0626; Aug 14, 2009, 04:55 PM.

                          Comment


                          • #14
                            I'll take a look at this later tonight, but let me ask a couple of questions for clarity.

                            1. The Link and Draft 1 code are the same?
                            2. The Link and Draft 2 code are the same?
                            3. And other than the extra stuff around Link #2 and the formatting,
                            both Draft 1 and 2 are the same?

                            Then:
                            1. Link 1 works a you want?
                            2. Link 2 does not display the 2nd drop down box correctly?

                            In summary, are the above correct statements?

                            Comment


                            • #15
                              Some considerations ...

                              I looked at your code but have not found the problem yet.

                              However, I did put some test alert messages into this function:
                              Code:
                              function navFormSectionChanged(formName) {
                              var form = eval("document."+formName);
                              var sb = form.section;
                              var pb = form.page;
                              var index = FindNavFormIndex(formName);
                                if (sb && pb && (index != -1)) {
                                var section_index = sb.options[sb.selectedIndex].value;
                              alert(form.name+'\n'+section_index+':'+index);  // testing
                                  if (section_index != -1) {
                                  var pages = navTree[index][1][section_index];
                              alert(pages);  // testing
                                  var i;
                                  pb.options.length = 0;
                                    for (i = 0; i < pages.length; i++) {
                                    /*make next option with value as URL*/
                                    pb.options[pb.options.length] = new Option(pages[i][1],pages[i][0]);
                              //      pb.options[pb.options.length].value = pages[i][0];
                                    }/*end population loop*/
                                  }/*end section value check*/
                                }/*end HTML check*/
                              }/*end function*/
                              When you run the code, the first DD returns expected message, but the second DD fails as you have noted.

                              You are not using the version of the script I recommended with ID values
                              rather than your method of forming using document.form... (DOM) methods with the name.
                              It might be that the first and second form needs to be as document.form[0] and document.form[1], but again this is only a guess.

                              You might try using my suggestions in the earlier post as the ID values will be unique and should point to the correct DD <select ...> box.

                              Another potential problem is that the second DD name value is 'select'. I'm not sure you can use HTML tag values as the name value. It might work, but I would not risk it.

                              You might also look to see if <select> tags are allowed to have the same name value: you have two name='section'

                              Let us know if any of these suggestions help. All I know is that I gave you a working version and you have modified it extensively. My choice would be to go with what works!

                              Good Luck!

                              Comment

                              Working...
                              X