Multiple Selects without refreshing page

Hi, I have the code below, where there are 4 drop down boxes, one for the car make, car model, car year and car engine....
When the user selects the make the next drop down (model) shows the specific models of that make and so forth.....
how my javascript can change so there is no page refresh?
<?php require_once('Connections/adsCyprus.php'); ?>
<?php

$make=$_GET['make'];
$model=$_GET['model'];
$year=$_GET['year'];
$engine=$_GET['engine'];
$cc=$_GET['cc'];
$cyl=$_GET['cyl'];
$type=$_GET['type'];
$fuel=$_GET['fuel'];
$image=$_GET['image'];



if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_adsCyprus, $adsCyprus);
$query_rsMake = "SELECT id, make, image FROM make ORDER BY make ASC";
$rsMake = mysql_query($query_rsMake, $adsCyprus) or die(mysql_error());
$row_rsMake = mysql_fetch_assoc($rsMake);
$totalRows_rsMake = mysql_num_rows($rsMake);

$colname_rsModel = "-1";
if (isset($_GET['make'])) {
  $colname_rsModel = $_GET['make'];
}
mysql_select_db($database_adsCyprus, $adsCyprus);
$query_rsModel = sprintf("SELECT * FROM model WHERE make = %s ORDER BY model ASC", GetSQLValueString($colname_rsModel, "text"));
$rsModel = mysql_query($query_rsModel, $adsCyprus) or die(mysql_error());
$row_rsModel = mysql_fetch_assoc($rsModel);
$totalRows_rsModel = mysql_num_rows($rsModel);

$colname_rsEngine = "-1";
if (isset($_GET['make'])) {
  $colname_rsEngine = $_GET['make'];
}
$colname2_rsEngine = "-1";
if (isset($_GET['model'])) {
  $colname2_rsEngine = $_GET['model'];
}
$colname3_rsEngine = "-1";
if (isset($_GET['year'])) {
  $colname3_rsEngine = $_GET['year'];
}
mysql_select_db($database_adsCyprus, $adsCyprus);
$query_rsEngine = sprintf("SELECT * FROM engine WHERE make = %s and model = %s and year = %s ORDER BY engine ASC", GetSQLValueString($colname_rsEngine, "text"),GetSQLValueString($colname2_rsEngine, "text"),GetSQLValueString($colname3_rsEngine, "text"));
$rsEngine = mysql_query($query_rsEngine, $adsCyprus) or die(mysql_error());
$row_rsEngine = mysql_fetch_assoc($rsEngine);
$totalRows_rsEngine = mysql_num_rows($rsEngine);

$colname_rsYear = "-1";
if (isset($_GET['make'])) {
  $colname_rsYear = $_GET['make'];
}
$colname2_rsYear = "-1";
if (isset($_GET['model'])) {
  $colname2_rsYear = $_GET['model'];
}
mysql_select_db($database_adsCyprus, $adsCyprus);
$query_rsYear = sprintf("SELECT `year` FROM `year` WHERE make = %s and model = %s ORDER BY `year` ASC", GetSQLValueString($colname_rsYear, "text"),GetSQLValueString($colname2_rsYear, "text"));
$rsYear = mysql_query($query_rsYear, $adsCyprus) or die(mysql_error());
$row_rsYear = mysql_fetch_assoc($rsYear);
$totalRows_rsYear = mysql_num_rows($rsYear);

$colname_rsImage = "-1";
if (isset($_GET['engine'])) {
  $colname_rsImage = $_GET['engine'];
}
mysql_select_db($database_adsCyprus, $adsCyprus);
$query_rsImage = sprintf("SELECT image FROM engine WHERE engine = %s", GetSQLValueString($colname_rsImage, "text"));
$rsImage = mysql_query($query_rsImage, $adsCyprus) or die(mysql_error());
$row_rsImage = mysql_fetch_assoc($rsImage);
$totalRows_rsImage = mysql_num_rows($rsImage);

$colname_rsEngineDetails = "-1";
if (isset($_GET['make'])) {
  $colname_rsEngineDetails = $_GET['make'];
}
$colname2_rsEngineDetails = "-1";
if (isset($_GET['model'])) {
  $colname2_rsEngineDetails = $_GET['model'];
}
$colname3_rsEngineDetails = "-1";
if (isset($_GET['year'])) {
  $colname3_rsEngineDetails = $_GET['year'];
}
$colname4_rsEngineDetails = "-1";
if (isset($_GET['engine'])) {
  $colname4_rsEngineDetails = $_GET['engine'];
}
mysql_select_db($database_adsCyprus, $adsCyprus);
$query_rsEngineDetails = sprintf("SELECT * FROM engine WHERE make = %s and model = %s and year = %s and engine = %s", GetSQLValueString($colname_rsEngineDetails, "text"),GetSQLValueString($colname2_rsEngineDetails, "text"),GetSQLValueString($colname3_rsEngineDetails, "text"),GetSQLValueString($colname4_rsEngineDetails, "text"));
$rsEngineDetails = mysql_query($query_rsEngineDetails, $adsCyprus) or die(mysql_error());
$row_rsEngineDetails = mysql_fetch_assoc($rsEngineDetails);
$totalRows_rsEngineDetails = mysql_num_rows($rsEngineDetails);

$make=$HTTP_GET_VARS['make'];
$model=$HTTP_GET_VARS['model'];
$year=$HTTP_GET_VARS['year'];
$engine=$HTTP_GET_VARS['engine'];
$cc=$HTTP_GET_VARS['cc'];
$cyl=$HTTP_GET_VARS['cyl'];
$type=$HTTP_GET_VARS['type'];
$fuel=$HTTP_GET_VARS['fuel'];
$image=$HTTP_GET_VARS['image'];

session_start(); 
$_SESSION['svmake']=$_POST['make'];
$_SESSION['svmodel']=$_POST['model'];
$_SESSION['svyear']=$_POST['year'];
$_SESSION['svengine']=$_POST['engine'];
$_SESSION['svccs']=$_POST['cc'];
$_SESSION['svcyl']=$_POST['cyl'];
$_SESSION['svtype']=$_POST['type'];
$_SESSION['svfuel']=$_POST['fuel'];
$_SESSION['svimage']=$_POST['image'];
?>
<!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"><!-- InstanceBegin template="/Templates/Template0.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>ADS Accelerating Together</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<SCRIPT language=JavaScript>
function reload1(form)
{
var val1=form.make.options[form.make.options.selectedIndex].value; 

self.location='index1.php?make=' + val1 ;
}


function reload2(form)
{
var val1=form.make.options[form.make.options.selectedIndex].value; 
var val2=form.model.options[form.model.options.selectedIndex].value; 

self.location='index1.php?make=' + val1 + '&model=' + val2 ;
}


function reload3(form)
{
var val1=form.make.options[form.make.options.selectedIndex].value; 
var val2=form.model.options[form.model.options.selectedIndex].value; 
var val3=form.year.options[form.year.options.selectedIndex].value; 

self.location='index1.php?make=' + val1 + '&model=' + val2 + '&year=' + val3;
}

function reload4(form)
{
var val1=form.make.options[form.make.options.selectedIndex].value; 
var val2=form.model.options[form.model.options.selectedIndex].value; 
var val3=form.year.options[form.year.options.selectedIndex].value; 
var val4=form.engine.options[form.engine.options.selectedIndex].value; 

self.location='index1.php?make=' + val1 + '&model=' + val2 + '&year=' + val3 + '&engine=' + val4;
}
</script>

<style type="text/css">
<!--
#wrapper #TopLogoSearch table tr td #mainMenu #mainMenu {
	color: #FFF;
}
#wrapper #TopLogoSearch table tr td #mainMenu #mainMenu {
}
#wrapper #TopLogoSearch table tr td #mainMenu {
}
#wrapper #TopLogoSearch table tr td #mainMenu #mainMenu a {
}
#wrapper #TopLogoSearch table tr td #mainMenu a {
}
-->
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/bgGradient1.jpg);
}
#footer {
	margin-top: 20px;
	width: 500px;
}
#wrapper {
	height: auto;
	width: 968px;
	margin-right: auto;
	margin-left: auto;
}
#wrapper #mainImage {
	height: 498px;
	width: 968px;
}
#wrapper #TopLogoSearch table tr td #mainMenu {
	color: #FFF;
	margin-left: 10px;
}
#wrapper #footerNew {
	color: #FFF;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	padding-top: 10px;
}
#wrapper #searchOptions {
	color: #000;
	padding-left: 0px;
	background-image: url(images/searchBox.jpg);
	height: 35px;
}
#wrapper #TopLogoSearch {
	height: 75px;
	width: 968px;
}
#wrapper #TopLogoSearch table tr td #form1 table tr td .style8 span {
	color: #000;
}
#wrapper #TopLogoSearch table tr td #form1 table tr td .style8 {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
}
#wrapper #TopLogoSearch table tr td #form1 table tr td .style8 span:hover {
	text-decoration: underline;
}
#wrapper #separatorNew1 {
	padding-top: 8px;
	background-color: #1d1d1d;
}
#footer ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#footer ul li {
	display: inline;
}
#footer ul li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}
#footer ul li a:hover {
	color: #333333;
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.style13 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}
#content {	height: 400px;
	width: 598px;
}
.style26 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2B409C;
}
#wrapper #footerNotes {
	height: 138px;
	width: 980px;
}
#wrapper #footerNotes table tr {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: none;
	font-variant: normal;
	font-style: normal;
	text-align: center;
}
#wrapper #mainMenus ul li a {
	text-decoration: none;
	color: #000;
}
#wrapper #mainMenus ul li a:hover {
	color: #666;
}
#wrapper #TopLogoSearch table tr td #form1 table tr td .style2 a {
	color: #000;
	text-decoration: none;
}
#wrapper #TopLogoSearch table tr td #form1 table tr td .style2 a:hover {
	color: #666;
}
#wrapper #footer table tr td ul li table tr .style2 div a:hover {
	color: #666;
}
#wrapper #footer table tr td ul li table tr .style2 div a:hover {
	color: #666;
}
.style81 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
#wrapper #TopLogoSearch table tr td #form1 table tr td div .style81 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#wrapper #TopLogoSearch table tr td #form1 div .style81 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#wrapper #TopLogoSearch table tr td #form1 table tr td .style81 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#wrapper #footerNew a {
	color: #FFF;
	text-decoration: none;
}
#wrapper #footerNew a:hover {
	text-decoration: underline;
}
-->
</style>
</head>

<body>
<!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR newMenus ******** -->
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='newMenus',awmBN='DW';awmAltUrl='';</script>
<script charset='UTF-8' src='newMenus.js' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR newMenus ******** -->
<div id="wrapper">
  <div id="TopLogoSearch">
    <table width="100%" border="0">
      <tr>
        <td width="14%" height="61"><img src="images/logoSampleNew4.jpg" width="176" height="64" /></td>
        <td width="86%"><!-- InstanceBeginEditable name="topmenuedit" --> <br />
          <div id="mainMenu"><span id='mainMenu'>&nbsp;</span></div>
        <!-- InstanceEndEditable --></td>
      </tr>
    </table>
  </div>
  <!-- InstanceBeginEditable name="EditRegion5" -->
  <div id="searchOptions">
    <form id="carInfoRetrieval" name="carInfoRetrieval" method="get" action="automobilesDetails.php">
      <table width="100%" border="0">
        <tr>
          <td width="9%" height="34" class="style81">Begin Search</td>
          <td width="6%"><div align="right"><span class="style13">Make:</span></div></td>
          <td width="12%"><select name="make"  onchange="reload1(this.form)" class="style2" id="make" >
            <option value="">Select Make</option>
            <?php 
$make = $_REQUEST['make']; 
do {   
if($row_rsMake['make']==$make){ 
   $selected='selected="selected"'; 
} else { 
   $selected = ''; 
} 
?>
            <option <?php echo $selected;?> value="<?php echo $row_rsMake['make']?>"><?php echo $row_rsMake['make']?></option>
            <?php 
} while ($row_rsMake = mysql_fetch_assoc($rsMake)); 
  $rows = mysql_num_rows($rsMake); 
  if($rows > 0) { 
     mysql_data_seek($rsMake, 0); 
  $row_rsMake = mysql_fetch_assoc($rsMake); 
} 
?>
          </select></td>
          <td width="6%"><div align="right"><span class="style13">Model:</span></div></td>
          <td width="13%"><select name="model"  onchange="reload2(this.form)" class="style2" id="model" >
            <option value="">Select Model</option>
            <?php 
$model = $_REQUEST['model']; 
do {   
if($row_rsModel['model']==$model){ 
   $selected='selected="selected"'; 
} else { 
   $selected = ''; 
} 
?>
            <option <?php echo $selected;?> value="<?php echo $row_rsModel['model']?>"><?php echo $row_rsModel['model']?></option>
            <?php 
} while ($row_rsModel = mysql_fetch_assoc($rsModel)); 
  $rows = mysql_num_rows($rsModel); 
  if($rows > 0) { 
     mysql_data_seek($rsModel, 0); 
  $row_rsModel = mysql_fetch_assoc($rsModel); 
} 
?>
          </select></td>
          <td width="5%"><div align="right"><span class="style13">Year:</span></div></td>
          <td width="15%"><select name="year"  onchange="reload3(this.form)" class="style2" id="year" >
            <option value="">Select Year</option>
            <?php 
$year = $_REQUEST['year']; 
do {   
if($row_rsYear['year']==$year){ 
   $selected='selected="selected"'; 
} else { 
   $selected = ''; 
} 
?>
            <option <?php echo $selected;?> value="<?php echo $row_rsYear['year']?>"><?php echo $row_rsYear['year']?></option>
            <?php 
} while ($row_rsYear = mysql_fetch_assoc($rsYear)); 
  $rows = mysql_num_rows($rsYear); 
  if($rows > 0) { 
     mysql_data_seek($rsYear, 0); 
  $row_rsYear = mysql_fetch_assoc($rsYear); 
} 
?>
          </select></td>
          <td width="6%"><div align="right"><span class="style13">Engine:</span></div></td>
          <td width="17%"><select name="engine" onchange="reload4(this.form)" class="style2" id="engine">
            <option value="">Select Engine</option>
            <?php 
$engine = $_REQUEST['engine']; 
do {   
if($row_rsEngine['engine']==$engine){ 
   $selected='selected="selected"'; 
} else { 
   $selected = ''; 
} 
?>
            <option <?php echo $selected;?> value="<?php echo $row_rsEngine['engine']?>"><?php echo $row_rsEngine['engine']?></option>
            <?php 
} while ($row_rsEngine = mysql_fetch_assoc($rsEngine)); 
  $rows = mysql_num_rows($rsEngine); 
  if($rows > 0) { 
     mysql_data_seek($rsEngine, 0); 
  $row_rsEngine = mysql_fetch_assoc($rsEngine); 
} 
?>
          </select></td>
          <td width="11%"><div align="center"><span class="style2">
            <input name="submit" type="submit" class="style2" id="submit" value="Submit" />
          </span></div></td>
        </tr>
        <tr>
          <td colspan="2" class="style81"><input name="cc" type="hidden" id="cc" value="<?php echo $row_rsEngineDetails['cc']; ?>" />
          <input name="cyl" type="hidden" id="cyl" value="<?php echo $row_rsEngineDetails['cyl']; ?>" /> 
          <input name="type" type="hidden" id="type" value="<?php echo $row_rsEngineDetails['type']; ?>" /> 
          <input name="fuel" type="hidden" id="fuel" value="<?php echo $row_rsEngineDetails['fuel']; ?>" />
          <input name="image" type="hidden" id="image" value="<?php echo $row_rsEngineDetails['image']; ?>" /></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>
  </div>
  <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="MainTemplateEdit" -->
  <div id="mainImage">
    <map name="Map" id="Map">
      <area shape="rect" coords="30,434,119,480" href="index.php" />
      <area shape="rect" coords="124,434,210,481" href="index1.php" />
      <area shape="rect" coords="219,434,305,481" href="index2.php" />
      <area shape="rect" coords="316,435,405,480" href="index3.php" />
      <area shape="rect" coords="416,429,502,482" href="index4.php" />
      <area shape="rect" coords="513,429,612,482" href="index5.php" />
      <area shape="rect" coords="625,430,721,483" href="index6.php" />
    </map>
    <map name="MapMap" id="MapMap">
      <area shape="rect" coords="30,434,119,480" href="index.php" />
      <area shape="rect" coords="124,434,210,481" href="index1.php" />
      <area shape="rect" coords="219,434,305,481" href="index2.php" />
      <area shape="rect" coords="316,435,405,480" href="index3.php" />
      <area shape="rect" coords="416,429,502,482" href="index4.php" />
      <area shape="rect" coords="513,429,612,482" href="index5.php" />
      <area shape="rect" coords="625,430,721,483" href="index6.php" />
    </map> 
  <img src="images/front images/mainImageNew_2.jpg" width="969" height="498" border="0" usemap="#MapMap2" />
  <map name="MapMap2" id="MapMap2">
    <area shape="rect" coords="30,434,119,480" href="index.php" />
    <area shape="rect" coords="124,434,210,481" href="index1.php" />
    <area shape="rect" coords="219,434,305,481" href="index2.php" />
    <area shape="rect" coords="316,435,405,480" href="index3.php" />
    <area shape="rect" coords="416,429,502,482" href="index4.php" />
    <area shape="rect" coords="513,429,612,482" href="index5.php" />
    <area shape="rect" coords="625,430,721,483" href="index6.php" />
  </map>
  </div>
<!-- InstanceEndEditable -->
  <div id="footerNew">
    <div align="right"><a href="mailto:info@dinoangelides.com">Site Developed by dinoangelides design studio</a><a href="sitemap.php"></a></div>
  </div>
</div>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($rsMake);
mysql_free_result($rsEngine);
mysql_free_result($rsModel);
mysql_free_result($rsYear);
mysql_free_result($rsImage);

mysql_free_result($rsEngineDetails);
?>

Open in new window

dino_angelidesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Have a look at AJAX:

I will give you the google link since there are so many ways to skin a cat that you may want to change direction completely with for example a framework

http://www.google.com/search?q=ajax+php
StealthyDevCommented:
You can use AJAX to do this.
BardobraveCommented:
As you need to query server for every selection, you need to make AJAX calls in order to sustain data from server without reloading page.

If you're not familiariced with AJAX using you can start from here:

http://www.w3schools.com/Ajax/Default.Asp
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

amrish80Commented:
Use AJAX but in it send the ID of the car make on the onchange event....

and return the array seprated by , from the ajax file and by using java script split them again and display it in select box.
or  
u can use json to do that.


amrish80Commented:
StealthyDevCommented:
Hi, this would be the best you are looking for! (JQuery + AJAX)

http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
Michel PlungjanIT ExpertCommented:
@senthurpandian - not necessarily. jQuery is not the be-all-end-all of the universe. It does have an overhead and a steep learning curve if all you want is to have dynamic checkboxes
StealthyDevCommented:
@mplungjan: ofcourse, i agree! its not the "be-all-end-all". but i thought the above link might help him, as everyone has given him the Intro of AJAX only. :-)

Regards.

Michel PlungjanIT ExpertCommented:
Erm the FIRST link on my suggestion is

http://www.w3schools.com/php/php_ajax_database.asp

which is very close to final solution

Here are actual dropdowns
http://www.google.com/search?hl=en&q=ajax+php+dynamic+dropdown

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dino_angelidesAuthor Commented:
Hey guys thanks for your comments they have been helpful, I managed  though to make the two drop downs to work and still have two to go ...I  am attaching my files here because I have done every possible  combination I could think of  to make at least the year drop down to  work but it does not seem to get any data from the database...
When  the make is selected the correct models appear, then nothing......I hope  someone can see what I am not seeing in there...
index.php
findModel.php
findYear.php
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.