AJAX chained select boxes with mysql php populate

[samoht]

Hello all,

 

I am trying to build a form that has two select boxes. The first select box is for the main category and the second is for the sub-category. I have set up the form to use ajax to populate the sub-category select box based on the selection of the category.

 

Problem is that right now I am just hard coding in the category in HTML and the sub category look up is just a php page that looks like this"

<?php

// List of Items for Income
if ($_GET['ch'] == 'Income') {
   ?>
<select name="itemList">
<option value="Wages">Wages & Tips</option>
<option value="Interest Income">Interest Income</option>
<option value="Dividens">Dividens</option>
<option value="Gifts Recieved">Gifts Recieved</option>
<option value="Refunds">Refunds</option>
<option value="Transfer From Savings">Transfer From Savings</option>
<option value="Other Income">Other</option>
</select>

<?php
}

// List of items for Home
if ($_GET['ch'] == 'Home Expenses') {
   ?>
<select name="itemList">
<option value="Mortgage/Rent">Mortgage/Rent</option>
<option value="Electricity">Electricity</option>
...

 

And the HTML form simply

    <label class="cf_label" style="width: 150px;">Expendature Type:</label>
    <select class="cf_inputbox" id="select_category" size="1" title=""  name="select_category"  onchange="htmlData('items.php', 'ch='+this.value)" >
    <option value="">Choose Option</option>
    <option value="Income">Income</option>
<option value="Home Expenses">Home Expenses</option>
<option value="Transportation">Transportation</option>
<option value="Health">Health</option>
<option value="Charity/Gifts">Charity/Gifts</option>
<option value="Daily Living">Daily Living</option>
<option value="Entertainment">Entertainment</option>
<option value="Savings">Savings</option>
<option value="Obligations">Obligations</option>
<option value="Subscriptions">Subscriptions</option>
<option value="Miscellaneous">Miscellaneous</option>
    </select>

    <label class="cf_label" style="width: 150px;">Item Type:</label>
<div id="txtResult">
    <select class="cf_inputbox" id="select_subcat" size="1" title=""  name="select_subcat">
    <option value="">Choose Option</option>
    </select>
</div>

 

The ajax simply replaces the contents of txtResult.

 

What I want to do is use mysql to populate both select boxes  - and to have the php code  so that I don't need to know the hard coded value of the category. (I assume that will have somthing to do with table relations?)

 

Any ideas??

 

[MatthewJ]

Just replace the contents of the if with a query to the database and build the subcategory menu with the results. There are millions of tutorials on how to get data from mysql for use in a dropdown.

 

You will use the value of $_GET['ch'] in the query you create to the database

[samoht]

Thanks Matthew,

 

What I am not sure about is the query for two variables. I guess I can use a while or a for loop to filter out which category I would be searching for sub-categories too?

But even if I did that would I need a table relation in the sub-categories table with the categories table ?

[iScript]

Can we have the htmlData function??

 

did you use an XMLHttpRequest object?  and used the responseText property?

[MatthewJ]

I'm confused, if you are looking for subs of a category which you are passing in the get variable ch, wouldn't the query just be something like

$sql = "SELECT * FROM subcategories_table WHERE category = '".$_GET['ch']'."'";