Auto populate select PHP

[kidanr]

Hi, I have an issue that I think you could help me with.

I would like to make so that when I select something in my select box (my main category) a sub category for that will appear based on my selection in the main category.

I assume you would use AJAX for this as I have searched a bit but I can't get it to function with my script.

My MySQL looks like this:

CREATE TABLE main_categories (
ID int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(ID),
main_category varchar(250) UNIQUE
)

CREATE TABLE sub_categories (
ID int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(ID),
sub_category varchar(250),
main_category varchar(250)
)

My PHP is like this so far:

<form>
<p>Item Main Category:<br/>
<select name="mc" class="f" />';
$cat = mysql_query("SELECT * FROM main_categories ORDER BY main_category",$connect) or die(mysql_error());
while($row = mysql_fetch_array($cat))
{
echo '<option value="'.$row[ID].'">'.$row[main_category].'</option>';
}
echo '</select></p><p>
<select name="sc" class="input" id="sc" onchange="listUpdate(this.value)">
<option value="Please Select">Please Select</option>';
$scat = mysql_query("SELECT * FROM sub_categories ORDER BY sub_category",$connect) or die(mysql_error());
while($row = mysql_fetch_array($scat))
{
echo '<option value="'.$row[ID].'">'.$row[sub_category].'</option>';
}
echo '</select></p><p>
<select name="scc" class="input" id="scc" onchange="listUpdate(this.value)">
<option value="Please Select">Please Select</option>';
$scat = mysql_query("SELECT * FROM sub_sub_categories ORDER BY sub_sub_category",$connect) or die(mysql_error());
while($row = mysql_fetch_array($scat))
{
echo '<option value="'.$row[ID].'">'.$row[sub_sub_category].'</option>';
}
echo '
</select>
</p>
<p>Item name:<br/><input type="text" /></p>
<div id="model_id"></div>
</form>

[vibhaJ]

<script language="javascript">
function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){
				try{
				req = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
	}
function getSubCat(strURL)
{  

     var req = getXMLHTTP(); // fuction to get xmlhttp object
     if (req)
     {
      req.onreadystatechange = function()
      {
		 
		  if (req.readyState == 4)
		  { //data is retrieved from server
		 	   if (req.status == 200)
			   	{ // which reprents ok status 
					 document.getElementById('subCatDiv').innerHTML=req.responseText;
				}
		       else
		       { 
				 alert("There was a problem while using XMLHTTP:\n");
		       }
    	   }            
      }        
    req.open("GET", strURL, true); //open url using get method
    req.send(null);
	}
}
</script>
<select name="maincat" style="width:200px" onchange="getSubCat('getsubcat.php?catid='+this.value);return false">
<option value="1">Main Cat 1</option>   
<option value="2">Main Cat 2</option>   
<option value="3">Main Cat 3</option>                           
</select>

<div id="subCatDiv">
<!-- <select name="subcat" style="width:200px">
<option value="1">Sub Cat 1</option>   
<option value="2">Sub Cat 2</option>   
<option value="3">Sub Cat 3</option>                           
</select> -->
</div>

when you select maincat drop down js function getSubCat will be called.
getsubcat.php is php page which will return subcat dropdown using passed catid.
e.g. when you run getsubcat.php?catid=1 in browser then in view source
<select name="subcat" style="width:200px">
<option value="1">Sub Cat 1 of main cat 1</option>
<option value="2">Sub Cat 2 of main cat 1</option>
<option value="3">Sub Cat 3 of main cat 1</option>
</select>

using document.getElementById('subCatDiv'), div's inner content is changed each time different value is selected.

[kidanr]

Thanks for your effort but I dont understand what should be in getsubcat.php Could you please give me a code example or something that I could learn from?

Thanks
Mike

[kidanr]

Nevermind, thank you a lot, I solved it :)