Hi there,
Not too sure if you have found your solution yet but here's my 2cents.
The reason your form failed was because of your javascript syntax. subcat1 select list was not found in your form and you were trying to access it in by javascript which resulted in an error. This caused the javascript to stop what it was doing and will refuse to do anything until you fix that error. Also note that form.generation.etc etc in your javascript is not a valid syntax. Firebug was constantly complaining that there was an error. It should be some thing like document.form.getElementById('generation').selectedIndex.value;
In my version of the javascript i used window.document instead which gives me instant access to the form elements without having to write document.getElmentById().
CODE
<script language="javascript" type="text/javascript">
function reload_form()
{
var val1;
var val2;
var val3;
with (window.document.f1)
{
val1 = generation.value;
val2 = tree.value;
val3 = subcat1.value;
window.document.location = 'dd.php?generation=' + val1 + '&tree=' + val2 + '&subcat1=' + val3;
}
}
</script>
To find out more on window.document -
http://www.java2s.com/Tutorial/JavaScript/...dowdocument.htmThe form and PHP codes
CODE
<?php
// db connection
mysql_connect("host", "user", "pass") or die(mysql_error());
mysql_select_db("selectdb") or die(mysql_error());
if(isset($_GET['generation'])) // is generation set
$_GenId = $_GET['generation'];
if(isset($_GET['tree'])) // is tree set
$_Tree = $_GET['tree'];
if(isset($_GET['subcat1'])) // is subcat1 set
$_SubCat1 = $_GET['subcat1'];
?>
<form id="f1" name="f1">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="9%">Generation</td>
<td width="91%">
<select name="generation" id="generation" onchange="reload_form();">
<option value="">Select Generation</option>
<?php
$rs_gen = mysql_query("SELECT * FROM Generation") or die(mysql_error());
while($row = mysql_fetch_assoc($rs_gen))
{
$selected = "";
if($row['Gen_ID'] == $_GenId)
$selected = " selected";
echo '<option value="'.$row['Gen_ID'].'"'.$selected.'>'.$row['Generation'].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>Tree</td>
<td>
<select name="tree" id="tree" onchange="reload_form();">
<option value="">Select Name</option>
<?php
$rs_tree = mysql_query("SELECT Name FROM Tree WHERE Gen_ID = '$_GenId'");
while($row2 = mysql_fetch_assoc($rs_tree))
{
$selected = "";
if($row2['Name'] == $_Tree)
$selected = " selected";
echo '<option value="'.$row2['Name'].'"'.$selected.'>'.$row2['Name'].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<?php
// we're done with the connection
mysql_close();
?>
Since we're getting javascript to do a little work for us it doesn't matter if your form has the method or action declared. We use a form to enable us to access the HTML elements easily through javascript. If you're planning to submit the form you would definitely need method="post" and action="" set.
To sum it up.. your completed dd.php page should look like this
CODE
<!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>Lee Family Reunion</title>
<script language="javascript" type="text/javascript">
function reload_form()
{
var val1;
var val2;
var val3;
with (window.document.f1)
{
val1 = generation.value;
val2 = tree.value;
val3 = subcat1.value;
}
window.document.location = 'dd.php?generation=' + val1 + '&tree=' + val2 + '&subcat1=' + val3;
}
</script>
</head>
<body>
<?php
// db connection. Be sure to replace user, pass and selectdb with your own credentials.
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("selectdb") or die(mysql_error());
if(isset($_GET['generation']))
$_GenId = $_GET['generation'];
if(isset($_GET['tree']))
$_Tree = $_GET['tree'];
if(isset($_GET['subcat1']))
$_SubCat1 = $_GET['subcat1'];
?>
<form id="f1" name="f1">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="9%">Generation</td>
<td width="91%">
<select name="generation" id="generation" onchange="reload_form();">
<option value="">Select Generation</option>
<?php
$rs_gen = mysql_query("SELECT * FROM Genx") or die(mysql_error());
while($row = mysql_fetch_assoc($rs_gen))
{
$selected = "";
if($row['Gen_ID'] == $_GenId)
$selected = " selected";
echo '<option value="'.$row['Gen_ID'].'"'.$selected.'>'.$row['Generation'].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>Tree</td>
<td>
<select name="tree" id="tree" onchange="reload_form();">
<option value="">Select Name</option>
<?php
$rs_tree = mysql_query("SELECT Name FROM Tree WHERE Gen_ID = '$_GenId'");
while($row2 = mysql_fetch_assoc($rs_tree))
{
$selected = "";
if($row2['Name'] == $_Tree)
$selected = " selected";
echo '<option value="'.$row2['Name'].'"'.$selected.'>'.$row2['Name'].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<?php
// we're done with the connection
mysql_close();
?>
</body>
</html>
If you were to copy the complete source and run it you would get a javascript error saying that subcat1.value is not defined. You would need to complete the form by creating the subcat1 select list and write code to populate subcat1 select list. Left this for you try out on your own. subcat1 select list was missing in your posted code.
Sorry for the super long reply. Hope that has helped you. Good luck
This post has been edited by saturnx: 5 Jun, 2009 - 05:27 AM