Menu
Hello,
I recenly started with a dropdown form that get car Make, Model and Year. I have a database called “Vehicles” with 3 Tables “year”, “make”, “model”. When you select a year the optionfield make is comming up and you can select a make but after selecting for example “Toyota” it is stuck on Please Wait…
Can somebody tell me what I am missing or what is wrong with this script?
This is my Index.php:
[code=html]<html>
<head>
<title>Dropdown Car Year Make Model</title>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/custom.js”></script>
<?php include_once(‘dropdown.php’); ?>
</head>
<body>
<form action=”” method=”post”>
<select name=”drop_1″ id=”drop_1″>
<option value=”” selected=”selected” disabled=”disabled”>Select a Year</option>
<?php getTierOne(); ?>
</select>
<span id=”wait_1″ style=”display: none;”>
<img alt=”Please Wait” src=”ajax-loader.gif”/>
</span>
<span id=”result_1″ style=”display: none;”></span>
<span id=”wait_2″ style=”display: none;”>
<img alt=”Please Wait” src=”ajax-loader.gif”/>
</span>
<span id=”result_2″ style=”display: none;”></span>
<span id=”wait_3″ style=”display: none;”>
<img alt=”Please Wait” src=”ajax-loader.gif”/>
</span>
<span id=”result_3″ style=”display: none;”></span>
</form>
</body>
</html>
Custom.js (Javascript)
[CODE]$(document).ready(function() {
$(‘#wait_1’).hide();
$(‘#drop_1’).change(function(){
$(‘#wait_1’).show();
$(‘#result_1’).hide();
$.get(“dropdown.php”, {
func: “drop_1”,
drop_var: $(‘#drop_1’).val()
}, function(response){
$(‘#result_1’).fadeOut();
setTimeout(“finishAjax(‘result_1’, ‘”+escape(response)+”‘)”, 400);
});
return false;
});
});
function finishAjax(id, response) {
$(‘#wait_1’).hide();
$(‘#’+id).html(unescape(response));
$(‘#’+id).fadeIn();
}
Dropdown.php
[code=php]<?php
//**************************************
// Page load dropdown results //
//**************************************
include_once(‘dbconnect.php’);
function getTierOne()
{
$result = mysql_query(“SELECT DISTINCT year FROM vehicles order by year desc”)
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
echo ‘<option value=”‘.$tier[‘year’].'”>’.$tier[‘year’].'</option>’;
}
}
//**************************************
// First selection results //
//**************************************
if(isset($_GET[‘func’]) && ($_GET[‘func’] == “drop_1”)) {
drop_1($_GET[‘drop_var’]);
}
function drop_1($drop_var)
{
include_once(‘dbconnect.php’);
$result = mysql_query(“SELECT DISTINCT make FROM vehicles WHERE year=’$drop_var’ ORDER BY make asc”)
or die(mysql_error());
echo ‘<select name=”drop_2″ id=”drop_2″>
<option value=” ” disabled=”disabled” selected=”selected”>Select Make</option>’;
while($drop_2 = mysql_fetch_array( $result ))
{
echo ‘<option value=”‘.$drop_2[‘make’].'”>’.$drop_2[‘make’].'</option>’;
}
echo ‘</select>’;
echo “<script type=”text/javascript”>
$(‘#wait_2’).hide();
$(‘#drop_2’).change(function(){
$(‘#wait_2’).show();
$(‘#result_2’).hide();
$.get(“dropdown.php”, {
func: “drop_2”,
drop_var: $(‘#drop_2’).val(),
drop_var2: $(‘#drop_1’).val()
}, function(response){
$(‘#result_2’).fadeOut();
setTimeout(“finishAjax(‘result_2’, ‘”+escape(response)+”‘)”, 400);
});
return false;
});
</script>”;
}
?>
In the future I will get a data file with car battery’s that should match the selected make, model and year after a submit… Is this possible and how should I adjust my database and script?
Any help would be very welcome?
Thanks in advance
Kind Regards