What I am trying to achieve is populating a second dropbox box after a selection in the first drop down box.
I'm not too familar with AJAX (which I believe I will need to use to achieve this).
So far I have the following PHP code.
<select name="category">
<?php
$q = $admindb->getParentCategories();
while($row=mysql_fetch_assoc($q)){
$title=$row['title'];
$catid=$row['id'];
?>
<option value="<?php echo $catid; ?>"<?php if($catid == $form->value("category")){ echo 'selected="selected"'; }?>><?php echo $title; ?></option>
<?php
}
?>
</select>
<select name="subcategory">
<?php
$q = $admindb->getSubCategories($catid);
while($row=mysql_fetch_assoc($q)){
$title=$row['title'];
$catid=$row['id'];
?>
<option value="<?php echo $catid; ?>"<?php if($catid == $form->value("subcategory")){ echo 'selected="selected"'; }?>><?php echo $title; ?></option>
<?php
}
?>
</select>
As you can see, I have two dropdown boxes.
The problem is that the second box needs the selection of the first to work. So I need to implement a way of passing the selection from the first box onto the second box on the fly.
Could anyone offer any pointers about how to do this?
Thanks
You will need to isolate the code for creating the first and second dropdown into two separate PHP files. When someone selects a category in the first select box, issue an Ajax request to the file that generates the second listbox. Include, with the request, the selection in the first select box. I'd recommend using jQuery to perform the actual Ajax request.
Depending on where the data is coming from, you may or may not need an ajax call specifically. BUT you do need to catch the event and then populate the 2nd dropdown box accordingly. The easiest way to do this is by using jQuery events:
http://api.jquery.com/category/events/
There are TONES of tutorials for this as well. Just google it.
So you're going to have HTML, and you're going to use jQuery (Because it's baller.)
In your HTML, you're going to have a <form...>
with your two drop down form fields.
I'm going to use short pseudo'ish code to explain.
$('#first_dropdown').change(function(
// When someone makes a change to the drop down or "selects" something (maybe bind click() too)
// Your code here to select the value selected and do a ...
$.post() // post to some PHP script that will return the values that will fill the 2nd
// dropdown but it'll be stored in some javascript variable
// and you're going to add jQuery code to take that js variable to populate the 2nd dropdown
){});
Here is a way to do this
onchange
Now, you can use jQuery, prototype, yui whatever JS tool kit that fits you. If I were a beginner I would be sending mark up in from server in response to my AJAX call and would replace that markup in dropdown