Best way to do dynamic drop downs? Load a drop down list based on another.

[coreysnyder04]

I have been looking around and I haven't been able to find a good way to do a dynamic dropdown based on a drop down that appears ahead of that one.

So..

[Dropdown1]  //I want the selection of this dropdown to populate dropdown2

[Dropdown2]  //I want the items that appear here, to depend on whats selected in dropdown1

 

I am currently doing it via Javascript, and it works ok. But the problem I'm having now is when I want to dynamically load the entire form, to show the current values in the db, it doesn't work. Because I'm populating [dropdown1] rather than selected it. So the 'onchange' code doesn't get ran, so the values in [dropdown2] don't get populated, so the value in [dropdown2] doesn't get selected. Any ideas?

 

Thanks,

Corey

[haku]

Not fully sure what your saying, but I it looks like you want some AJAX. AJAX is a method of combining javascript with an serverside programming language to pull data from the server and add it to the page in real-time.

 

If I'm mis-understanding what you are asking, then can you explain it a little more?

[coreysnyder04]

basically what I have now is what is explained in this tutorial:

http://www.plus2net.com/javascript_tutorial/dropdown-list.php

 

But I just don't like how that works. I was hoping there would be a more modern/efficient way to go about doing that. If not, do you know how I could populate both of those on a page load? I'm writing a page for 'edit profile'. So I want to load the form with all their data such as "First Name" and so on. But the way that's setup, you can't use code to set the first dropdown to something, make it automatically populate the 2nd drop down with data, and then set the 2nd drop down to something. And have all that happen on 1 page load. See my problem?

[haku]

Honestly, no, I don't see what the problem is. You have to give some examples about what exactly you want to happen. For example

 

I do A, then B will happen, but if I do C then D will happen.

 

Fill in A, B C and D with actual examples. That makes it easier to see what you are getting at.

[coreysnyder04]

Ok. Click the link I posted above. Down the page you'll see 2 drop downs. [Category] and [subcategory]. When you select the first one, it loads the values for the sub category so they can be chosen. Now let's say that the site remembers what you put in the last time you were there. So you go to the page, it loads up what you put in [Category], the last time you were there. Using that it then loads the possible values for [subCategory]. Then it looks to see what you put in subcategory, the last time you were there, and populates that box.

 

This is exactly what I need to do. Because I have a register page where they put in all this information. Then I have an edit profile page where they change all that information. The edit profile page dynamically loads in all their data into the form. Well, all but the [subCategory] drop down. See my problem? I think I've laid it out as simple as it can get.

[haku]

Lets get this straight - when you access the edit page, your selection for category is automatically selected, but your selection for subcategory isn't selected?

 

Lets see your current code.

[coreysnyder04]

 

Here is my form. Notice the "onChange="handleOnChange(this);" on the league drop down.

<form action="playeradded.php" method="post" name="registerPlayer">
	<table width="100%" height="102%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eaebdc">
          <tr>
            <td height="100%" class="xbig"><p>Member Registration</p>
              </td>
          </tr>
          <tr class="small">
            <td height="100%" class="small">* - Denotes required field</td>
          </tr>
          <tr>
            <td height="100%"><table width="100%" border="0" align="center" cellpadding="3" cellspacing="5">
              <tr>
                <td height="10" bgcolor="#d9d9b7"><strong class="big">Step 1:  Member Name and Password</strong></td>
                  </tr>
              <tr>
                <td align="left">
                    <table width="610" border="0" align="left" cellpadding="0" cellspacing="5">
                        <tr>
                          <td width="141" align="right"><strong>*Username: </strong></td>
                          <td width="453" align="left"><table width="441" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="144"><input type="text" value="<?php echo $username; ?>" disabled name="username" onchange="CheckUsername(this.value);" /></td>
                                <td width="240"> <div id="usernameresult"></div></td>
                              </tr>
                            </table>                           </td>
                        </tr>
                        <tr>
                          <td align="right"><strong>*Password: </strong></td>
                          <td width="453"><input type="password" value="<?php echo $password; ?>" disabled name="password" /></td>
                        </tr>
                      </table>				      </td>
                  </tr>
              </table>              </td></tr>
          <tr>
            <td height="100%"><table width="100%" border="0" align="center" cellpadding="3" cellspacing="5">
              <tr>
                <td bgcolor="#D9D9B7" class="big">Step 2:  Member Information</td>
              </tr>
              <tr>
                <td>
                  <table width="556" border="0" cellpadding="0" cellspacing="5">
                    <tr>
                      <td align="right"><strong>*Email:</strong></td>
                      <td><input type="text" value="<?php echo $email; ?>" name="email" /></td>
                    </tr>
				<tr>
                      <td align="right"><strong>*Confirm Email:</strong></td>
                      <td><input type="text" name="email2" value="<?php echo $email; ?>"/></td>
                    </tr>
                    <tr>
                      <td width="141" align="right"><strong>*First Name:</strong></td>
                      <td width="249"><input type="text" value="<?php echo $firstName; ?>" name="firstName" /></td>
                    </tr>
                    <tr>
                      <td align="right"><strong>*Last Name:</strong></td>
                      <td><input type="text" name="lastName" value="<?php echo $lastName; ?>" /></td>
                    </tr>
                    <tr>
                      <td align="right"><strong>*Gender:</strong></td>
                      <td><select name="gender" value="<?php echo $gender; ?>">
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                        <option value="N">N/A</option>
                        </select>                        </td>
                    </tr>
                    <tr>
                      <td align="right"><strong>*Zip/Postal Code: </strong></td>
                      <td><input type="text" name="zip" value="<?php echo $zip; ?>" /></td>
                    </tr>
                    <tr>
                      <td align="right"><strong>*Birthdate:</strong></td>
                      <td><input type="text" name="age" value="<?php echo $age; ?>"/> 
                        Example: '07/12/1980'</td>
                    </tr>
                  </table>                  </td>
              </tr>
            </table>
              <table width="100%" border="0" align="center" cellpadding="3" cellspacing="5">
                <tr>
                  <td bgcolor="#D9D9B7" class="big">Step 3:  Hockey Information </td>
                </tr>
                <tr>
                  <td height="100%"><table width="618" border="0" cellspacing="5" cellpadding="0">
                    <tr>
                      <td width="137" align="right"><strong>General League:</strong></td>
                      <td width="466"><label>
                        <select name="league" value="<?php echo $league; ?>" onChange="handleOnChange(this);">
                          <option value="Select">Select a League</option>
		  <option <?php if($league == "Chiller") {echo "selected";} ?> value="Chiller">Chiller League</option>
                          <option <?php if($league == "highschool") {echo "selected";} ?> value="highschool">High School Ice Hockey</option>
                          <option <?php if($league == "osh") {echo "selected";} ?> value="osh">Ohio Street Hockey League</option>
                          <option <?php if($league == "corh") {echo "selected";} ?> value="corh">Central Ohio Roller Hockey</option>
                          </select>
                      </label></td>
                    </tr>
                    <tr>
                      <td width="137" align="right"><strong>Skill Bracket:</strong></td>
                      <td><select name="skillLevel" size="1" accesskey="skillLevel">
                          <option value="blank"></option>
		  <option value="SelectSkill">Select Skill Level</option>
                          </select></td>
                    </tr>
                    <tr>
                      <td width="137" align="right"><strong>Seeking a Team: </strong></td>
                      <td><select name="seekingTeam">
                        <option value="blank"></option>
		<option <?php if($seekingTeam == "N") {echo "selected";} ?> value="N">No</option>
                        <option <?php if($seekingTeam == "Y") {echo "selected";} ?> value="Y">Yes</option>
                        </select>                        </td>
                    </tr>
                    <tr>
                      <td width="137" align="right"><strong>Position Played: </strong></td>
                      <td><select value="w" name="positionPlayed">
                        <option value="blank"></option>
		<option <?php if($positionPlayed == "w") {echo "selected";} ?> value="w">Wing</option>
                        <option <?php if($positionPlayed == "c") {echo "selected";} ?> value="c">Center</option>
                        <option <?php if($positionPlayed == "d") {echo "selected";} ?> value="d">Defense</option>
                        <option <?php if($positionPlayed == "g") {echo "selected";} ?> value="g">Goalie</option>
                      </select>                      </td>
                    </tr>
                    <tr>
                      <td align="right"> </td>
                      <td>
				  <input name="Submit" type="Submit" id="Submit" value="Submit" src="Images/signin.gif" width="63" height="18"/></td>
                    </tr>
                  </table>                  
                    <br /></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td height="100%"> </td>
          </tr>
        </table>
	</form>

 

Here is my javascript:

<script src="request.js"></script>
<script>
function handleOnChange(dd1)
{
  var idx = dd1.selectedIndex;
  var val = dd1[idx].text;
  var par = document.forms["registerPlayer"];
  var parelmts = par.elements;
  var prezsel = parelmts["skillLevel"];
  var country = val;
  if (country != "Select a League")
  {
   var directory = ""+document.location;
   directory = directory.substr(0, directory.lastIndexOf('/'));

   Http.get({
	url: "./" +  country + ".txt",
	callback: fillPrez,
	cache: Http.Cache.Get
}, [prezsel]);
  }
}
function fillPrez(xmlreply, prezelmt)
{
  if (xmlreply.status == Http.Status.OK)
  {
   var prezresponse = xmlreply.responseText;
   var prezar = prezresponse.split("|");
   prezelmt.length = 1;
   prezelmt.length = prezar.length;
   for (o=1; o < prezar.length; o++)
   {
     prezelmt[o].text = prezar[o];
   }
  }
  else
  {
   alert("Cannot handle the Ajax call.");
  }
}
</script>