I'm having a problem getting some code to work. Using PHP and javascript I'm attempting to get a form with combo boxes whose contents are gotten from arrays which are dynamically generated using PHP to access a mySQL database).
I think I got the hard part done and working. The thing is when I select in my first combo box I get a javascript error saying that the first array my javascript function calls is undefined. To me it looks like it is clearly defined. I tried to mess around with the location of the definition but still no luck.
Any ideas?
Thanks in advance.
-Steve
here's the code:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
//Generate all arrays for families
var arrFamily = new Array();
var arrFamilyName = new Array();
<?php
mysql_select_db("solutions")
or die("Could not select database");
$sql = mysql_query("SELECT * FROM sbu");
while($row=mysql_fetch_row($sql)) {
$sbu_id = $row[0];
$sbu_name = $row[1];
$sql2 = mysql_query("SELECT * FROM family where sbu_id=$sbu_id");
while ($row2=mysql_fetch_row($sql2)) {
$family_name = $row2[0];
$family_id = $row2[1];
echo "arrFamily[] = ".$sbu_id.";";
echo "arrFamilyName[] = \"".$family_name."\";";
}
}
?>
// Generate all arrays for products
var arrProduct = new Array();
var arrProductName = new Array();
<?php
mysql_select_db("solutions")
or die("Could not select database");
$sql = mysql_query("SELECT * FROM family");
while($row=mysql_fetch_row($sql)) {
$family_name = $row[0];
$family_id = $row[1];
$sql2 = mysql_query("SELECT * FROM product where sbu_id=$sbu_id and family_id=$family_id");
while ($row2=mysql_fetch_row($sql2)) {
$product_id = $row2[0];
$product_name = $row2[1];
echo "arrProduct[] = ".$family_id.";";
echo "arrProductName[] = \"".$product_name."\";";
}
}
?>
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "sbuChoice") {
// Empty the third drop down box of any choices
for (var q=productChoices.productChoice.options.length;q>=0;q--) productChoices.productChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</HEAD>
<BODY>
<FORM NAME="productChoices">
<table align="center">
<tr>
<td>
<SELECT id=sbuChoice name=sbuChoice onchange="selectChange(this, productChoices.familyChoice, arrFamilyName, arrFamily);">
<option value = 0 SELECTED>[SELECT]</option>
<?php
mysql_select_db("solutions")
or die("Could not select database");
$sql = mysql_query("SELECT * FROM sbu");
while ($row = mysql_fetch_array($sql)) {
$sbu_id=$row[0];
$sbu_name=$row[1];
echo "<option value=".$sbu_id.">".$sbu_name."</option>";
}
?>
</SELECT>
</TD><TD>
<SELECT id=familyChoice name=familyChoice onchange="selectChange(this, productChoices.productChoice, arrProductName, arrProduct);">
</SELECT>
<SELECT id=productChoice name=productChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>
</BODY>