Dynamic Chained Drop Downs using mySQL and PHP

Hi all, hope I can get some help.

I am very very new to PHP so bare with me.

I am doing a system that has information about cars.

My drop downs are populated with MySQL data (working ok)
I want to have one drop down for Make of car, then then enables another for the model.

I have been doing a ton of research and have gotten some great ideas how to link my database and select data from it, etc. A lot from this site, I am learning a lot.

I need the selected item from the first drop down to be saved in a string variable essentially, whether that is the text or label for that item, I really don't care.
For example, if they select "ford" from the drop down, I need the word "ford" saved in a variable so I can use it for my mySQL select statement.

My comments in the code should explain enough of my problem.

<?php
	require_once("connect.php");
	$sql="SELECT Name FROM `make`"; //grabs the names of car manufacturers from database
	$querymakelist = mysql_query($sql);
	$modeloptions="";
	$makeoptions=""; 
			while($row = mysql_fetch_array($querymakelist))
			{
				$id=$row[0];
				$makeoptions.="<option value=\"$id\">".$id.'</option>'; 
			}
	
	//the below function, builds the list of models depending on the make chosen for the 2nd dropdown, it all works exept the issue
	//stated below. This function is not called until later in the html
	function buildModels() {
		$sql="SELECT modelname FROM `model` WHERE mfr=\"$modeloptions\";";
//Main issue:
		//I need to get the selected value from the first drop down's text or value field and put it into $modeloptions ! How???
		//The above line WILL properly grab models from database if I declare what $modeloptions is. 
		//ex. $modeloptions = "Ford" ... declaring it as static works fine, but I need to declare it dynamically.
		
		$modellist=mysql_query($sql);
			while($row = mysql_fetch_array($sql))
			{
				$modelid=$row[0];
				$modeloptions.="<option value=\"$modelid\">".$modelid.'</option>';
			}
	}
?>

<html>
<head>
	<title>FastChange Oil Light Reset</title>
</head>

<body>
	<p class="headertext">Choose a Make -> </p>
	<form name=mainform>
		<SELECT name=make> 
		<OPTION VALUE=0 onChange="buildModels();" >Select Make
		<?=$makeoptions?> 
		<!-- I NEED TO Grab whatever was chosen here and apply it to the $modeloptions variable in the above php -->
		</SELECT>  
		
		<SELECT name=model>
		<OPTION VALUE=0>Select Model
		<?=$modeloptions?> 
		</SELECT>		
	</form>
</body>
</html>

lowtekotc

Newbie Poster

2 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

3 Months Ago

Few things.

Don't use short tags: <?= ... ?> use <?php echo ...; ?> instead.

Although it works, using double quotes about attribute values and using lowercase tag selectors should ensure your html can validate in a number of !doctypes: <SELECT name=make> could be <select name="make">

BTW, there's no !doctype - so this may trigger quirksmode in some browsers:
So use, e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

for xhtml transitional or

<!DOCTYPE html>

for html5

It's usually a good move to separate form handling code from the form logic into separate files. THis ensures that page refreshes do not send the form data twice. Often this is not a problem, but it could be if you're posting data to a DB.

Anyway, in order to get the selected item to show in the dropdown, you can check the $_POST variable and modify the 'build options code':

BUT your bigegst problem here is that you're calling a php function from a js call (onchange). You can't do this - only via Ajax. JS deals with data on the client (browser) - it can't access php code (on the server) unless it goes via XMLHttpRequest (or the ActiveX object equivalent for early versions of IE).

This sounds really complicated, but using a library like jQuery can make it a breeze.

Come back if you don't understand what I'm getting at.

diafol

Rhod Gilbert Fan (ardav)

Moderator

7,792 posts since Oct 2006

Reputation Points: 1,170

Solved Threads: 1,080

3 Months Ago

it's not possible to call the function buildModels(); from the javascript events onChange because it's a php function, and php is a server-side, it requires page load, unless you use AJAX.

vaultdweller123

Posting Pro

554 posts since Sep 2009

Reputation Points: 42

Solved Threads: 75

3 Months Ago

Hi all, I will fix my standards issues with the poor coding.

Also! I fixed the problem and got it working. I had to learn and use AJAX like you all suggested and everything is working perfectly.

lowtekotc

Newbie Poster

2 posts since Feb 2012

Reputation Points: 10