Good Afternoon,

I am realtivly new to the wonderfull world of PHP and am reaching out for help on a project I am currently working on. I would appreciate any help on this issue. Thank You in Advance!

Objective: Create Dynamic Multiple Drop Down Boxs - Options to be stored in DB tables, and Querys to return information based off of the drop down box selections.

Ideally the Boxes will be Dynamic with box1 being the primary key -{i.e - 2002(box1) - Chevrolet(box2)- Camaro(box3)}

Further more after the validation of Box 1 and 2 - The result will cause box 3 to populate with the cooresponding data based off of the selection {i.e - 2006(box1) - Mitsubishi(Box2) - Caused Box 3 to return [Lancer, Galant, Eclipse, etc..]}

In turn, Box1-3 is now populated with *Required fields* the Submit Button will redirect them to the appropriate page based off of their selection.

Once again thank you for your efforts, I have a strong background in WebDevelopment, but not strong enough without PHP. For tutorial purposes, please assume I know nothing about development and speak to me like a 5 year old.

hi,

There is a difference between the simple dropdown list and the Multiple select box.

I assume ur talking about the regular dropdown list: I can give u the script:


The ajax script that will call the php file (this should be put in the file where the select forms are)

function isIE()
	{
		var browser = navigator.appName;
		if(browser == "Microsoft Internet Explorer") 
			return true;
			
		return false;		
	}
function MakeObject() {
	var xmlhttp=false; 
        try {
                xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); 
        } catch (e) {
                try {
                        xmlhttp = new
                        ActiveXObject('Microsoft.XMLHTTP'); 
            } catch (E) {
                xmlhttp = false;
                        }
        }
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp = new XMLHttpRequest(); 
        }
		return xmlhttp;
}
	

function aj_models()
{
	
	var request=MakeObject();
	list_year = document.getElementById('year');
	list_car = document.getElementById('car');
	year = list_year.value;
        car = list_car.value;
			
			
			request.open('get', 'get_models.php?year='+year+'&car_id='+car);	
			request.onreadystatechange = function () {
			if(request.readyState == 4)
			{ 		
				
				var the_response = request.responseText;	
				var c = document.getElementById('models');
				
					
				if(esteIE() || (navigator.appName.indexOf("Opera") + 1))
				{
				c.outerHTML = '<select name='models' id='models'>'+the_response+'</select>';
				}
				else 
				{
					c.innerHTML = the_response;
				}
				}		
			} 
		
	request.send(false);
					
}

And here is the HTML form

<form>
<select name='year' id='year'>
here u echo the years
</select>

<select name='car' id='car' onchange='aj_models();'>
here u can echo the cars from the database or static
</select>

<select name='models' id='models'>
here remains empty.
</select>
</form>

Now the form is ready to work, make the php file called get_models.php and make sure its put in the same directory, or if you want to change the directory don't forget to change the ajax function too.

$year = $_GET['year'];
$car_id = $_GET['car_id'];

$sql = "select from your database the models that have the year, and the correct car type";
$query = mysql_query($sql);
$response = "";
while($row = mysql_fetch_array($query))
{
  $response .=$response."<option value='".$row['model_id']."'>".$model_name."</option>"; /*here u stash the response and get it ready to be printed out  */
}

print $response;

I find this the simplest method.
Sorry if you will find some errors in names or anything, I wrote this in a hurry.

good luck

Thank You for the detailed response, I will work on this Wed. Please check back then to see if I have any questions... Great job! Can't wait to get started on this!

This article has been dead for over six months. Start a new discussion instead.