Creating a 2nd drop down list from MySQL

[Frank_Rizzo]

This is more a javascript / PHP problem.

I have 2 drop down boxes. The first is called Category and is hard coded in the HTML, the second is to be populated from a MySQL database depending on the Category!

I can nearly do this, but I can't work out how to make it populate when onchange() is done. i.e., when the 1st drop down box changes then an onchange event is triggered, this then needs to run the PHP to select and build the 2nd drop down list. I can only seem to run javascript here, and not kick in with the PHP.

What's the secret :-)?

[andreasfriedrich]

Javascript is client side while PHP [php.net] is serverside. Either you need to send along all data in an javascript array and then have javascript repopulate the dropdown menu or the onchange needs to trigger a request to the server.

Andreas

[TeofenGL]

depending on the number of top categories you have, it may be possible for you do do all those queries at once (or do a thorough query and split it up), and populate a set of second level pulldowns, only one of which would be visible (favorite method) at a time.

it should also be possible to have an iframe (or similar) with the second pulldown update from the server from a js function triggered by the onchange event...

[Frank_Rizzo]

Here's a method I'm trying with some, but not full success.

post a changed variable to the php script

<select name="category" onChange="location.href='search.php?changed=1'">
<option value="CAT1">category 1</option>
<option value="CAT2">category 2</option>
</select>
.
.
.
<php
if($changed<>0){
scan the db and rebuild the second drop down list
.
.

The problem I have got now is that I can't pass the category name to the code which rebuilds the drop down list.

I don't know how to put the value of the category list into a php var.

The rebuild code requires this:

$query="select DATA from TABLE where CATEGORY = '$category'";

I can't work out how to set $category to = "CAT1" or "CAT2". I guess I need to append &category= something to the location.href='search.php?changed=1'. But what?

[crypto]

Frank,

Try this:

<script language="JavaScript">
function next_drop_down()
{
 i=document.category_form.category.selectedIndex;
 cat_val=document.category_form.category.options[i].value;
 location.href='search.php?changed=1&category='+cat_val;
}
</script>
<form name="category_form" method="post" action="">
<select name="category" onChange="next_drop_down();">
 <option value="CAT1">category 1</option>
 <option value="CAT2">category 2</option>
 <option value="CAT3">category 3</option>
</select>

[Frank_Rizzo]

Excellente!

Works a treat. One slight problem though, the category list does not remember it state when a new category is selected.

On first load category 1 is displayed. If I change this to category 3, the script runs and the 2nd drop down list is populated with category 3 items. The category list however, reverts back to showing "category 1".

This is because the page is reloading I guess. What it needs is a <selected="selected"> setting on whichever category was selected.

[crypto]

Don't worry javascript to the rescue :)

<script language="JavaScript">
function next_drop_down()
{
i=document.category_form.category.selectedIndex;
cat_val=document.category_form.category.options[i].value;
location.href='search.php?changed=1&category='+cat_val;
}
</script>
<form name="category_form" method="post" action="">
<select name="category" onChange="next_drop_down();">
<option value="CAT1">category 1</option>
<option value="CAT2">category 2</option>
<option value="CAT3">category 3</option>
</select>

<?
if (isset($HTTP_GET_VARS["category"]))
{
$category=$HTTP_GET_VARS["category"];
}
else
{
$category="";
}
?>

<script language="JavaScript">

var objlen=document.category_form.category.length;

var selected_cat="<? echo $category;?>";

for(var i=0;i < objlen;i++)
{
if (document.category_form.category.options[i].value==selected_cat)
{
document.category_form.category.options[i].selected=true;
break;
}
}
</script>

[Frank_Rizzo]

Many thanks for that.