PHP MySQL Linked dropdown help please!

I have a search form that the visitor uses on the website to search through a list of vehicles from a MYSQL database.
Initially all vehicles are listed on the page displayed in price order asc.

The search form has several drop down search boxes.
Type.
Make.
Model.
Mileage.
Fuel.
Transmission.
Colour.
Min Price.
Max Price.

I have worked out how to get a few of the dropdowns to link using PHP MySQL and Javascript. The Type, Make and Model are linked. The user makes a selection and the next box is then populated accordingly.

What I was wanting to do was have all the dropdowns update based on the selections made. For example if the user chooses Motorbikes from the first drop down then the fuel dropdown will only show the available values from the database based on the Motorbike selection.
I don’t want the page to reload every time the user makes a selection. I’m not sure if I then need to do this using ajax or not?

All the data is held in 1 database.

Can anyone point me in the right direction with this please. If I’ve not been clear enough please let me know and I’ll try to put up some code examples of what I have already.

Thank in advance

Ajax. Or, if the data isn’t too much, you might load all values in JS variables and then handle everything with JS. Of course, this wouldn’t work for people that have JS disabled.

Thanks for the super quick reply on this. I’m quite willing to use ajax to get this to work. The JS I think I could set up quicker but the site uses a vast amount of data so ajax I think sounds like the better option. Can you send me some links to tutorials or examples online that are similar to what I’m trying to achieve please? I’ve had a look but I’m not sure what to search for.

Try googling for something like ‘ajax drop down list example’ :slight_smile:

Though there are several ways to achieve the goal for such with JavaScript and AJAX. I would recommend to use jQuery for this. There are few examples to use AJAX with jQuery.
http://api.jquery.com/jQuery.get/

As you stuggested guido2004, I’ve been searching for any ajax drop down examples on google to try to get this working. Thought I’d found one that I’ve managed to get working with two dropdowns. I’m struggling however to get this working with any more than that. Would you be able to point out where I’m obviously going wrong with this.

If you can give me an idea of I would get this working with more than 2 drop downs I would be very greatful and I think I should be able to work the rest of it out that way.

Here’s the main script which holds the search form.

<html>
<head>
<title>Roshan's Ajax dropdown code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
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{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
	}
	
	
	
	function getMake(strURL) {		
		
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('makediv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\
" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}
</script>




</head>

<body>

<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Vehicles</td>
    <td  width="150"><select name="Type" onChange="getMake('findmakes.php?Type='+this.value)">
	<option value="">Please Choose</option>
	<option value="1">Cars (<?php $total_resultsCars = mysql_result(mysql_query("SELECT COUNT(*) as Num FROM Used_Stock2 WHERE Type='1'"),0); echo $total_resultsCars;?>)</option>
	<option value="2">Bikes (<?php $total_resultsBikes = mysql_result(mysql_query("SELECT COUNT(*) as Num FROM Used_Stock2 WHERE Type='2'"),0); echo $total_resultsBikes;?>)</option>
    <option value="3">Vans &amp; Trucks (<?php $total_resultsVans = mysql_result(mysql_query("SELECT COUNT(*) as Num FROM Used_Stock2 WHERE Type='3'"),0); echo $total_resultsVans;?>)</option>
        </select></td>
  </tr>
  <tr style="">
    <td>Make</td>
    <td ><div id="makediv"><select name="Make" onChange="getMake('findmakes.php?Type='+this.value)">
      <option>Please Choose</option>
      </select></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

This is the php script (findmakes.php) that pulls in the dropdown items when previous ones are selected.

<? $Type=$_REQUEST['Type'];

$query="SELECT DISTINCT Make FROM Used_Stock2 WHERE Type=$Type ORDER BY Make ASC";
$result=mysql_query($query);

?>
<select name="Make">
<option>Please Choose</option>
<? while($row=mysql_fetch_array($result)) { 
$total_resultsMake = mysql_result(mysql_query("SELECT COUNT(*) as Num FROM Used_Stock2 WHERE Make='$row[Make]'"),0);?>
<option value='<?=$row['Make']?>'><?=$row['Make']?> (<?php echo $total_resultsMake ?>)</option>
<? } ?>
</select>