Can make 3 of 4 <select> reload... but not the 4th

DBookatay · January 29, 2011

I am trying to add a 4th <select></select> to Roshan's Triple Ajax dropdown script, based on "year", "make", "model" and "trim" of a vehicle, but can not get the "trim" options to correctly pull from the dB.

Does anyone see anything that is preventing this?

Index.php

<html>
<head>
<title>Roshan's Triple Ajax dropdown code</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">
function getXMLHTTP() {
	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;
    }

// Get Make
function getMake(yearId) {		
	var strURL="get_Make.php?year="+yearId;
	var req = getXMLHTTP();
	if (req) {
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				if (req.status == 200) {						
					document.getElementById('make_div').innerHTML=req.responseText;						
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}		
}

// Get Model
function getModel(yearId,makeId) {		
	var strURL="get_Model.php?year="+yearId+"&make="+makeId;
	var req = getXMLHTTP();
	if (req) {
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				if (req.status == 200) {						
					document.getElementById('model_div').innerHTML=req.responseText;						
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}
}

// Get Trim
function getTrim(yearId,makeId,modelId) {
	var strURL="get_Trim.php?year="+yearId+"&make="+makeId+"&model="+modelId;
	var req = getXMLHTTP();
	if (req) {
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				if (req.status == 200) {						
					document.getElementById('trim_div').innerHTML=req.responseText;						
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}
}
</script>

<?
include_once ('include/page_files/mysql_connect.php');

// Get Years
$query = "SELECT DISTINCT year FROM vehicle_Data order by year DESC";
$result = mysql_query($query); 
$numrows = mysql_num_rows($result);
for($x = 0; $row = mysql_fetch_array($result); $x++) {
	$years .= '<option value="'.$row['year'].'">'.$row['year'].'</option>';
}

// Insert Into Database
if ($_POST['edit']){
	$year = $_POST['year'];
	$make = $_POST['make'];
	$model = $_POST['model'];
	$purchased = substr($_POST['purchased'], 6).'-'.substr($_POST['purchased'], 0, 2).'-'.substr($_POST['purchased'], 3, 2);

	mysql_query("INSERT INTO test_Inventory (
		year, make, model, purchased
	) VALUES (
		'$year', '$make', '$model', '$purchased'
	)") or die(mysql_error()); header('Location:'.$_SERVER['REQUEST_URI'].'');
}

?>
</head>

<body>

<form action="<? echo $_SERVER['REQUEST_URI'] ?>" method="post" name="form" autocomplete="off">

<select name="year" onchange="getMake(this.value)">
	<option></option>
	<? echo $years ?>
</select>
<div id="make_div"><select name="make" disabled="disabled" style="width:100px"></select></div>
<div id="model_div"><select name="model" disabled="disabled" style="width:100px"></select></div>
<div id="trim_div"><select name="trim" disabled="disabled" style="width:100px"></select></div>
<input type="text" name="purchased" id="purchased">
<input type="submit" id="frmBtnOff" value="Update Profile" name="edit">

</form>
</body>
</html>

get_Make.php

<?
include_once ('include/page_files/mysql_connect.php');

$year = $_GET['year'];

$query="SELECT DISTINCT make FROM vehicle_Data WHERE year = '$year'";
$result=mysql_query($query);
?>

<select name="make" onchange="getModel(<?=$year?>,this.value)" style="width:100px">
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['make']?>><?=$row['make']?></option>
<? } ?>
</select>

get_Model.php

<?
include_once ('include/page_files/mysql_connect.php');

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

$query = "SELECT DISTINCT model FROM vehicle_Data WHERE year='$year' AND make ='$make' order by model DESC";
$result = mysql_query($query); 
$numrows = mysql_num_rows($result);
for($x = 0; $row = mysql_fetch_array($result); $x++) {
	$models .= '<option value="'.$row['model'].'">'.$row['model'].'</option>';
}

?>

<select name="model" id="model" onchange="getTrim(<?=$model?>,this.value)" style="width:100px">
<? echo $models ?>
</select>

get_Trim.php

<?
include_once ('include/page_files/mysql_connect.php');

$year = $_GET['year'];
$make = $_GET['make'];
$model = $_GET['model'];

$query = "SELECT DISTINCT trim FROM vehicle_Data WHERE year='$year' AND make='$make' AND model='$model'";
$result = mysql_query($query); 
$numrows = mysql_num_rows($result);
for($x = 0; $row = mysql_fetch_array($result); $x++) {
	$trims .= '<option value="'.$row['trim'].'">'.$row['trim'].'</option>';
}


?>

<select name="trim" id="trim">
<? echo $trims ?>
</select>

I've been screwing around with this as my 1st real ajax venture and after 3 hours I am officially stumped...

Any help would GREATLY be appreciated.

Thanks,

Brad

Sign In

Can make 3 of 4 <select> reload... but not the 4th

Recommended Posts

DBookatay

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information