Javascript/php/mysql interfacing for cascading select menu
Marcool
I've been trying to implement a cascading menu system for selection of
data located in a mysql database.
I'm basing all this on the info from this page here :
http://forums.digitalpoint.com/showthread.php?t=703846
and with tweeks from this page here :
http://www.webdeveloper.com/forum/archive/index.php/t-48140.html
I've arrived at this :
###############CODE##################
<html>
<head>
<script language="JavaScript">
var dates_jarr = new Array();
var descs_jarr = new Array();
<?php
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
//extract the dates and put them into the $dates_arr array
$query_dates="SELECT DISTINCT eventDate FROM events ORDER BY
eventDate";
$dates=mysql_query($query_dates);
$i=0;
while ($dates_warr=mysql_fetch_assoc($dates)) {
$dates_arr[$i]=$dates_warr['eventDate'];
$i++;
$query_desc="SELECT DISTINCT eventDesc FROM events WHERE eventDesc
IS NOT NULL && eventDate='$dates_warr[eventDate]'";
$descs=mysql_query($query_desc);
$x=0;
$new_arr=array();
while ($descs_warr=mysql_fetch_assoc($descs)) {
$new_arr[$x]=$descs_warr['eventDesc'];
$x++;
}
$descs_arr[$dates_warr['eventDate']]=$new_arr;
//the $descs_arr array contains a series of arrays, indexed by the
dates from $dates_arr
}
//this part 'transfers' the arrays to javascript variables
for ($i=0; $i < count($dates_arr); $i++) {
echo 'dates_jarr['.$i.']= "'. $dates_arr[$i] .'";';
}
for ($s=0; $s < count($dates_arr); $s++) {
for ($x=0; $x < count($descs_arr[$dates_arr[$s]]); $x++) {
echo 'descs_jarr['.$dates_arr[$s].']['.$x.']= "'.
$descs_arr[$dates_arr[$s]][$x] .'";';
}
}
mysql_close();
?>
function resetForm(theForm) {
/* reset dates */
theForm.dates.options[0] = new Option("Date...", "");
for (var i=0; i<dates_jarr.length; i++) {
theForm.dates.options[i+1] = new Option(dates_jarr[i],
dates_jarr[i]);
}
theForm.dates.options[0].selected = true;
/* reset descs */
theForm.descs.options[0] = new Option("Description...", "");
theForm.descs.options[0].selected = true;
}
function updateDescs(theForm) {
var date =
theForm.dates.options[theForm.dates.options.selectedIndex].value;
var newDesc = descs_jarr[date];
theForm.descs.options.length = 0;
theForm.descs.options[0] = new Option("Description...", "");
for (var i=0; i<newDesc.length; i++) {
theForm.descs.options[i+1] = new Option(newDesc[i], newDesc[i]);
}
theForm.descs.options[0].selected = true;
}
</script>
</head>
<body>
<form name="autoSelectForm" action="" method="post">
<select size="1" name="dates" onchange="updateDescs(autoSelectForm)">
</select>
<select size="1" name="descs">
</select>
<input type="submit">
</form>
<script type="text/javascript">
resetForm(document.autoSelectForm);
</script>
</body>
</html>
###############END CODE##################
The result is two select boxes, one with the dates from my database,
the other with the descriptions.
The dates dropdown menu is populated correctly, but the selection of
any one of the dates results in no action at all from the descriptions
box, which only evey contains the "Descriptions..." option...
Any help would be appreciated, my eyes are going square from staring
at the code, and I can't seem to figure out the problem with it...
Regards,
Mark.