I have got the majority of the code complete. I do have a question with the javascript / php part.
I want to have an effect like www.kraftkitchens.com does inregards to their drop down on the left side. I have dual drop downs as well and I would like to grey out the second drop down unitl the first is selected.Here is what I have for my code so far. If someone could point me to a tutorial or an example that would be great.
Thanks.
<?php
include ('includes/config.php');
//Query for occasions
$query_occasions = "SELECT occasion_type, id FROM occasion ORDER BY occasion_type ASC";
$occasions = mysql_query($query_occasions,$dbconn) or die(mysql_error());
?>
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function BodyLoad() {
var select = document.FormName.occasion_type;
select.options[0] = new Option("Select One");
select.options[0].value = 0;
<?PHP
$ctr = 1;
While( $Row = mysql_fetch_array($occasions) ) {
echo "select.options[$ctr] = new Option(\"$Row[occasion_type]\");\n";
echo "select.options[$ctr].value = \"$Row[occasion_type]\";\n";
$ctr++;
}
?>
}
function Fill_Sub() {
var main_select = document.FormName.occasion_type;
var sub_select = document.FormName.recipe_type;
if( main_select.options[main_select.selectedIndex].value != 0 ) {
sub_select.length = 0;
}
<?PHP
$query_occasions = "SELECT occasion_type, id FROM occasion ORDER BY occasion_type ASC";
$occasions = mysql_query($query_occasions,$dbconn) or die(mysql_error());
while( $Row = mysql_fetch_array($occasions) ) {
?>
if( main_select.options[main_select.selectedIndex].text == "<?PHP echo $Row[occasion_type]; ?>" ) {
<?PHP
$query_recipe_type = "SELECT * FROM recipe_type WHERE occasion_id = '$Row[id]' ORDER BY recipe_type ASC";
$recipe_type = mysql_query($query_recipe_type,$dbconn) or die(mysql_error());
$ctr = 0;
While( $Row2 = mysql_fetch_array($recipe_type) ) {
echo "sub_select.options[$ctr] = new Option(\"$Row2[recipe_type]\");\n";
echo "sub_select.options[$ctr].value = \"details.php?id=$Row2[id]\";\n";
$ctr++;
}
?>
}
<?PHP
}
mysql_close($dbconn);
?>
}
-->
</SCRIPT>
</HEAD>
<BODY onload="BodyLoad();">
<FORM name="FormName" method="POST" action="">
<TABLE border="1">
<TR>
<TD>Main Category</TD>
<TD>Sub Category</TD>
</TR>
<TR>
<TD>
<SELECT name="occasion_type" onchange="Fill_Sub();"></SELECT>
</TD>
<TD>
<SELECT name="recipe_type" onChange="window.location=document.FormName.recipe_type.options[document.FormName.recipe_type.selectedIndex].value">
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
