And to add to the code that you tried helping me with...
It's not simple HTML...
It's PHP, MySQL and AJAX.
There is a database where I'm manually typing in every piece of information that you see when you use the dropdown menu's.
There's a seperate file for connecting to the database.
There's a function.php file that has most of the backend information.
And there's an index.php file for the front end.
The following is a part of the func.php file for one of the dropdowns...
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT tier_two FROM three_drops WHERE tier_one='$drop_var' ORDER BY tier_two")
or die(mysql_error());
echo '<select name="drop_2" id="drop_2">
<option value=" " disabled="disabled" selected="selected">Choose Make</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_2['tier_two'].'">'.$drop_2['tier_two'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
And the following is my html file
<?php
include('db.php');
include('func.php');
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Year, Make, Model and Engine</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.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();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
/*
function finishAjax_tier_three(id, response) {
$('#wait_3').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
*/
function finishAjax_tier_four(id, response) {
$('#wait_3').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<style type="text/css">
<!--
body {
background-color: #666666;
}
.style1 {color: #000000}
-->
</style></head>
<body>
<h1 align="center"><em>Vehicle Year, Make, Model and Engine size</em></h1>
<h1 class="style1"> </h1>
<p>
<form action="" method="post">
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Select 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>
<span id="wait_4" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_4" style="display: none;"></span>
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$drop_2 = $_POST['drop_2'];
$drop_3 = $_POST['drop_3'];
$drop_4 = $_POST['drop_4'];
echo "You selected a ";
// echo $drop_3." ".$drop." ".$drop_4." ".$drop_2;
echo $drop." ".$drop_2." ".$drop_3." ".$drop_4;
echo "<br>";
echo "Aren't you special...";
}
?>
</body>
</html>
