asked on

AJAX 3 Level Selections

I am attempting to create a 3 level drop down using PHP + MySQL + AJAX
The majority of it I have working as I want.

There are three things I require a bit of help with to get this completed.

#1 - Relationships
I need the third selection to relate to both the first and second selection.
Currently it only relates to the second.

#2 - Default Values
Rather than blank or 'Please Selects' I would like each of the 3 levels to start with a default value
e.g.
First level, first value 'selected'
Second Level, first value based off First Level selected
Third Level, first value based off First Level and Secon Level selected

#3 - Retained Values
When the search is run, I would like it if the 3 selections previously made are retained.

Below is the code I am currently using.
Any help that can be provided with this would be greatly appreciated.

---------------------
Start 'ajaxMySQL.php'
---------------------
<?php
require_once 'ini.inc.php';
require_once 'includes'.CC_DS.'global.inc.php';
 
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
     
$data=$_GET['data'];
$val=$_GET['val'];
 
$dbhost = $glob['dbhost'];
$dbuser = $glob['dbusername'];
$dbpass = $glob['dbpassword'];
$dbname = $glob['dbdatabase'];
 
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");  
 
     if ($data=='special_type') { 
          $result=mysql_db_query($dbname,"select distinct special_type from CubeCart_inventory ORDER BY special_type DESC");
          while(list($name)=mysql_fetch_array($result)){
			 echo "<input type='radio' name='special_type' id='special_type' $default_checked value=\"$name\" onClick=\"dochange('special_date', this.value)\" > $name";
          }
     } else if ($data=='special_date') {
          echo "<select name='special_date' onChange=\"dochange('special_name', this.value)\">\n";
          echo "<option value='0'>Please Select</option>\n";
          $val2=$val;
          //$val = substr($val,0,2);                                 
          $result=mysql_db_query($dbname,"SELECT distinct special_date FROM CubeCart_inventory WHERE special_type = '$val' ORDER BY special_date DESC LIMIT 4");
          while(list($name)=mysql_fetch_array($result)){
               echo "<option value=\"$name\" >$name</option> \n" ;
          }
     } else if ($data=='special_name') {
          echo "<select  name='special_name' >\n";
          echo "<option value='0'>Please Select</option>\n";
          $val2=$val;
          //$val = substr($val,0,4);
          $result=mysql_db_query($dbname,"SELECT distinct special_name FROM CubeCart_inventory WHERE special_date = '$val2' ORDER BY special_name ASC ");
          while(list($name)=mysql_fetch_array($result)){       
               echo "<option value=\"$name\" >$name</option> \n" ;
          }
     }
 
     echo "</select>\n";  
 
?>
---------------------
End 'ajaxMySQL.php'
---------------------
 
And velow is purely a snippet of the code involved in a template file...
 
	<div align="center" style="margin-bottom: 10px;">
	<form name=sel>
		{TOP_LEVEL_LABEL} <font id=special_type></font><br>
		{THIRD_LEVEL_LABEL} <font id=special_date><select><option value='0'>Please Make Initial Selection</option></select></font><br>
		{SECOND_LEVEL_LABEL} <font id=special_name><select><option value='0'>Please Make Initial Selection</option></select></font><br><br>
		
		<input type="hidden" name="searchStr" value="" /> 
		<input type="hidden" name="_a" value="viewCat" /> 
		<input type="submit" value='Submit the form data'>
	</div>
 
 
<script language=Javascript>
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};
 
function dochange(src, val) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; 
               } 
          }
     };
     req.open("GET", "ajaxMysql.php?data="+src+"&val="+val); 
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=tis-620"); // set Header
     req.send(null); 
}
 
window.onLoad=dochange('special_type', -1);     
</script>