Dropdown Form Value

[Aaron]

The way my VA works is there are wings (hubs) with a number of squadrons in each wing. So on the registration form, the dropdown values for squadrons will have to change depending on what wing is selected. I don't know how I get the value of a dropdown later in the same form. The value I need is in red, but understandably doesn't work. I need to get the $wing->id for the option that is selected in requested wing field, to be passed to the requested quadron. Here is what I have:

<td>Requested Wing: *</td>

<td>

<select name="wing" id="wing">

<?php

foreach($allwings as $wing)

{

echo '<option value="'.$wing->id.'">'. $wing->name .'</option>';

}

?>

</select>

</td></tr><tr>

<td>Requested Squadron: *</td>

<td>

<select name="squadron" id="squadron">

<?php

foreach($allsquadrons as $squad)

{

if($squad->wing==$wing->id)

{

echo '<option value="'.$squad->id.'">'. $squad->name .'</option>';

}

}

?>

</select>

</td></tr>

[Sava]

So you have 2 dropdown menus, and you would like the options for the second dropdown menu to be determined by the first one, just to be clear?

So for example dropdown one has A B C and if A is selected dropdown 2 has X, Y, Z but if B is selected it as S, T, V for example?

[Aaron]

Sorry for late reply, on vacation, but yes, that is the general idea.

[Aaron]

This is what I have now, but it doesn't work yet, please help:

registration_mainform.tpl

 
<td>Requested Wing: *</td>
<td>
 <select name="wing" id="wing" onclick="getSquads()">
 <?php
 foreach($allwings as $wing)
 {
  echo '<option value="'.$wing->id.'">'. $wing->name .'</option>';

 }
 ?>
 </select>
</td></tr><tr>
<td>Requested Squadron: *</td>
<td>
 <select name="squadron" id="squadron"><div id="squads">
 <?php
 foreach($allsquadrons as $squad)
 {
     if($squad->wing==1)
	    {
echo '<option value="'.$squad->id.'">'. $squad->name .'</option>';
  }
 }
 ?>
 </div></select>
</td></tr>

registration_javascript.tpl

 
function getSquads(){
var wingid=document.getElementById('wing').value
 squads.innerHTML="";
<?php
 foreach($allsquadrons as $squad)
 {
?>
 if(wingid==<?php echo $squad->wing ?>){
  squads.innerHTML=+""
 }
<?php
 }
?>
}

[Aaron]

any ideas at all??

[onelifexv]

I think you're going to need to use Ajax for this. I need to do something similar myself but haven't had time to crack open the Ajax books yet.

[magicflyer]

No need of Ajax here. You will need to code it in js so that the onchange event changes the dropdown menu. Use this example:

Drop Down Menu #1

|

Javascript onchange Event sends Menu #1 value to function "x" that determines the available values in Menu #2

|

Function "x" will evaluate the passed value. Using an If then statement it will determine the available values in Menu #2

|

Drop Down Menu #2 will show the values according to which value selected in Menu #1

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

to change the values in drop down menus, you will need to assign a unique id to each Dropdown. ex:

<select name="country" id="subcategory" >
<option value="usa">United States</option>

In the above example we used a unique id

subcategory

We will use that to change the value in that specific dropdown menu. To do that we do:

document.formname.subcategory.options[0]=new Option("Select Sub-Category","");

document.formname.subcategory.options[1]=new Option("Colleges","Colleges");

document.formname.subcategory.options[2]=new Option("Institutes","Institutes");

document.formname.subcategory.options[3]=new Option("Schools","Schools");

document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");

document.formname.subcategory.options[5]=new Option("Universities","Universities");

This will add 6 new values to the dropdown menu. the options are put in this format:

new Option([text that will show in the dropdown menu],[javascript value])

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

Now moving on to how a dropdown menu can affect another:

In this example we have 2 drop down menus(in html):

<select name="country" id="category"
onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">

<option value="usa">United States</option>
<option value="ca">Canada</option>
select name="college" id="subcategory" >
<option value=""></option>

The first dropdown menu(with id "Category") has two options, United States and Canada. The second (with id "subcategory") has no options because they will be determined later on. You may have also noticed that we have a onchange event on the first dropdown menu, this will send the value that is selected to a function that will evaluate it and output options for the second dropdown menu.

The function will look something like this:

function dropdownlist(listindex)
{
switch (listindex)
{
case "usa" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Yale University","yale");
document.formname.subcategory.options[2]=new Option("New York City University","nyc");
break;


case "ca" :

document.formname.subcategory.options[0]=new Option("Select Sub-Category","");

document.formname.subcategory.options[1]=new Option("University of Toronto","uot");

document.formname.subcategory.options[2]=new Option("Canadian University","cu");
}
}

Thats it! Now the selected country in the dropdown menu will affect which universities that will show in the 2nd dropdown.

If this helped, please like. Thanks!

[Aaron]

Thanks I read part of the post and will try that out now and let you guys know if it works

[Aaron]

It's not working, but there are no errors. It does screw up another javascript script somehow though. Here is what I did:

 
<td>Requested Wing: *</td>
<td>
 <select name="wing" id="wing" onchange="javascript: getSquads(this.options[this.selectedIndex].value);">
 <?php
 foreach($allwings as $wing)
 {
  echo '<option value="'.$wing->id.'">'. $wing->name .'</option>';

 }
 ?>
 </select>
</td></tr><tr>
<td>Requested Squadron: *</td>
<td>
 <select name="squadron" id="squadron"><div id="squads">
 <?php
 foreach($allsquadrons as $squad)
 {
     if($squad->wing==1)
	    {
echo '<option value="'.$squad->id.'">'. $squad->name .'</option>';
  }
 }
 ?>
 </div></select>
</td></tr>

 
function getSquads(listindex)
{
squads.innerHTML="";
var cnt;
switch (listindex)
{
<?php
foreach($allwings as $wing)
{
?>
cnt=0;
case "<?php echo $wing->id ?>" :
<?php
 foreach($allsquadrons as $squad)
 {
 if($squad->wing==$wing->id)
 {
?>
document.register.squadron.options[cnt]=new Option("<?php echo $squad->name ?>","<?php echo $squad->id ?>");
cnt++;
<?php
 }
 }
?>
break();
<?php
}
?>
}
}

[magicflyer]

Well, try this code instead:

<td>Requested Wing: *</td>
<td>
<select name="wing" id="wing" onchange="javascript: getSquads(this.options[this.selectedIndex].value);">
<?php
foreach($allwings as $wing)
{
echo '<option value="'.$wing->id.'">'. $wing->name .'</option>';

}
?>
</select>
</td></tr><tr>
<td>Requested Squadron: *</td>
<td>
<select name="squadron" id="squadron"><div id="squads">
</div></select>
</td></tr>

function getSquads(listindex)
{
var cnt = 0;
switch (listindex)
{
<?php
foreach($allwings as $wing)
{
?>
cnt=0;
case "<?php echo $wing->id ?>" :
<?php
foreach($allsquadrons as $squad)
{
if($squad->wing==$wing->id)
{
?>
document.register.squadron.options[cnt]=new Option("<?php echo $squad->name ?>","<?php echo $squad->id ?>");
cnt++;
<?php
}
}
?>
break();
<?php
}
?>
}

If that does not work then it could be that javascript and php dont mix together.

[Aaron]

It still doesn't work

[Aaron]

I read somewhere that the .HTMLinsert thing didn't support php, but it works with another field. I'll try it without the php and manually enter it and see if it works.

[Aaron]

It works, but I cant put any php in it. Are there any other ideas? I can't put it in the form manually because there are custom nicknames for each squadron and the squadron leader can slightly change them if they want. For example change it from the "123 wolf squadron" to the "123 wolves". Is there a way that I can put the value of a javascript variable in the .insertHTML thing? something like this:

div.innerHTML="";

foreach (squadron within the selected wing as var squadron)

{

div.innerHTML='<option value=" ' squadron->id ' " ...

}