selecting from combo box problem

[karin21]

hi guys! can you look for my script im required to use php. i have two comboboxes namely cat and sub cat. and i have a textbox. my logic goes to when i select item from cat it will display its sub items in subcat. and then when i select subcat it will display the information about the sub items in textbox.. my problem is when i select cat it display the information about the subitem that is supposed to be after selecting the subcat. can anyone help me out of this? thanks

<SCRIPT language=JavaScript>
function reload(form){
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='ordering.php?cat=' + val ;
}
function populate(form){
document.f1.quan.value=document=f1.subcat.value;
}
</script>

<?


mysql_connect("localhost","root","");
mysql_select_db("databasename") or die(mysql_error());


$quer2=mysql_query("SELECT DISTINCT item,id FROM product order by item");




   if(isset($cat) and strlen($cat) > 0){

$quer=mysql_query("SELECT DISTINCT subitem,itemcolor FROM itemlist where id=$cat order by subitem");

}
   else
{

$quer=mysql_query("SELECT DISTINCT subitem,itemcolor FROM itemlist order by subitem"); 

}


echo "<table border=1>";

echo "<form method=post name=f1 action=''>";



////////// Starting of first drop downlist /////////

echo "<select name='cat' onchange=\"reload(this.form)\"><option value='0' selected>Select one</option>";

while($row = mysql_fetch_array($quer2)) {

if($row['id']==@$cat)
{

    echo "<option selected value='$row[id]'>$row[item]</option>"."<BR>";

}

else
{

echo "<option value='$row[id]'>$row[item]</option>";}

}

echo "</select>";

////////////////// This will end the first drop down list ///////////




////////// Starting of second drop downlist /////////

echo "<select name='subcat'><option value=''>Select one</option>";

$row2 = mysql_fetch_array($quer);

echo "<option value='$row2[id]'>$row2[subitem]</option>";



echo "<tr><th>Product Code:<th><input type='text' value='$row2[itemcolor]'> <tr>";


echo "</select>";

////////////////// This will end the second drop down list ///////////


echo "<input type=submit value=Submit>";
echo "</form>";


?>

[matthewl]

Hello! I am in the mood to help you not only fix it but improve your script so you do not have to reload the page to get the sub categories using AJAX. I am sorry I did not test this code completely, but it should work in theory.

This is the main page that displays the form:

<SCRIPT language=JavaScript>
function load(form){
var val=form.cat.options[form.cat.options.selectedIndex].value;

//location of the file we load to get the options
site = "http://"+document.domain+"/getcats.php?id="+val;

// if a category is selected I will open a connection to the location above
// else I will load a default option that tells the user to select a main category 
if(val) {
    
//reset the options then set the default subcatory
f1.subcat.options.length = 0;
f1.subcat.options[f1.subcat.options.length] = new Option('Please Select One', '');

//start the AJAX request
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  alert("Your browser does not support XMLHTTP!");
  }
httpRequest.onreadystatechange=function()
{
if(httpRequest.readyState==4)
  {
      //if I successfully load the php file I will load all the possible options
         var xmldoc = httpRequest.responseXML;
         var root = xmldoc.getElementsByTagName('root').item(0);
         for (var iNode = 0; iNode < root.childNodes.length; iNode++) {
               var node = root.childNodes.item(iNode);
                 value=node.getAttribute("id");
                 text=node.getAttribute("text");
                 f1.subcat.options[f1.subcat.options.length] = new Option(text, value);
        }
  }

}

httpRequest.open("GET", site, true);
httpRequest.send(null);

} else {
    f1.subcat.options[f1.subcat.options.length] = new Option('Please Select An Main Category', '');
}
}
function populate(form){
document.f1.quan.value=document=f1.subcat.value;
}
</script>

<?


mysql_connect("localhost","root","");
mysql_select_db("databasename") or die(mysql_error());


$quer2=mysql_query("SELECT DISTINCT item,id FROM product order by item");

echo "<table border=1>";
echo "<form method=post name=f1 action=''>";

//build main category select
echo "<select name='cat' onchange=\"load(this.form)\"><option value='0' selected>Select one</option>";
while($row = mysql_fetch_array($quer2)) {
    echo "<option selected value='$row[id]'>$row[item]</option>\n";
}
echo "</select>";

echo "<select name='subcat'></select>";

echo "<input type=submit value=Submit>";
echo "</form>";

?>

The php that loads the option tags:

<?php
header('Content-type: text/xml');
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
mysql_connect("localhost","root","");
mysql_select_db("databasename") or die(mysql_error());

$quer=mysql_query("SELECT DISTINCT subitem,itemcolor FROM itemlist where id=".$_GET['id']." order by subitem");

echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>";
while($result = mysql_fetch_assoc($quer)) {
echo "<option id=\"".$result['id']."\" text=\"".$result['subitem']."\"/>";
}
echo "</root>":
?>