Stuck on AJAX Chained Select Boxes

Stuck on AJAX Chained Select Boxes

I've been trying to work on a page that is a mix of my own coding and someone else's (yeah, first mistake, I know). At this point I'm totally stuck. The intention is to have 3 select boxes side by side, with the second and third chained to load their data from the db only after the previous one has been selected. I'm pretty sure I've made somewhere near a million mistakes at this point.. So any help at all is very much appreciated.

<?php

session_start();

// Include MySQL class

require_once('../inc/mysql.class.php');

// Include database connection

require_once('../inc/global.inc.php');

// Include functions

require_once('../inc/functions.inc.php');


$id=$_REQUEST["id"];

$g=$_REQUEST["g"];

If($g=="m")

{

$g="male";

}

If($g=="f")

{

$g="female";


}

If(!$g)
{
   $g="gender";
}


$c=$_REQUEST["c"];





$sql="Select * from kpb_items where ID='$id'";

$result=mysql_query($sql);

$row=mysql_fetch_array($result);



$defimage=$row["defaultimage"];

$modimage=$row["modelimage"];

$modimage2=$row["modelimage2"];

$modimage3=$row["modelimage3"];

$modimage4=$row["modelimage4"];

$modimage5=$row["modelimage5"];

$modimage6=$row["modelimage6"];

$description2=$row["description2"];

$title=$row["title"];

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="../files/css/fixed.css" media="screen" />
<link type="text/css" rel="stylesheet" href="../css/styles.css" media="screen" />
   <style type="text/css">
      #modal-product-sizes select {
         background:#FFFFFF none repeat scroll 0 0;
         border:1px solid #DAE1E7;
         display:inline;
         float:left;
         font-family:Cambria,"Courier New",Courier,monospace;
         margin:15px 5px;
         padding:2px;
         width:100px;
      }
   </style>
<!-- jquery.cascade start -->

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
        <script type="text/javascript" src="../files/js/jquery/plugins/cascade/jquery.cascade.js"></script>           
        <script type="text/javascript" src="../files/js/jquery/plugins/cascade/jquery.cascade.ext.js"></script>
        <script type="text/javascript" src="../files/js/jquery/plugins/templating/jquery.templating.js"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

       
<!-- jquery.cascade end -->       

</head>
<body>
<div id="container">
  <div id="inner-container">
    <div id="header">
      <div id="inner-header"> <a id="logo-link" href="../index.php"></a>
        <div id="primary-nav">
          <div id="primary-nav-options">
            <ul>
              <li><a href="../pages/about/index.php"><img src="../files/css/images/links/about.gif" /></a></li>
              <li><a href="../pages/charities/index.php"><img src="../files/css/images/links/charity.gif" /></a></li>
              <li><a href="../cart/cart.php"><img src="../files/css/images/links/cart.gif" /></a></li>
            </ul>
          </div>
          <div id="emphatic-nav">
            <ul>
              <li><a href="../catalog/index.php"><img src="../files/css/images/links/catalog.gif" /></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="center">
      <div id="modal-product-box">
        <div id="modal-product-left">
          <div id="modal-product-display"> <img src="<?=$defimage;?>" alt="photo display" id="product-photo" height="425" width="425"> </div>
          <?

/*

We need to do 2 things.

A.) We need to make sure that we have a querystring for gender

B.) We need to, more importantly, make sure we NEED to display a male/female option

*/





$sql="Select ID from kpb_products where gender='female' and itemid='$id'";

$result=mysql_query($sql);

$fnum=mysql_num_rows($result);

$sql="Select ID from kpb_products where gender='male' and itemid='$id'";

$result=mysql_query($sql);

$mnum=mysql_num_rows($result);

?>
          <div id="modal-product-thumbs">
            <div class="modal-thumbs-box">
               <a href="#product-photo" onClick="document.getElementById('product-photo').src='<?=$modimage;?>'">
                   <img src="<?=$modimage;?>" alt="mini display" id="product-photo" height="100" width="100">
                </a>
            </div>
            <div class="modal-thumbs-box">
               <a href="#product-photo" onClick="document.getElementById('product-photo').src='<?=$modimage2;?>'">
                  <img src="<?=$modimage2;?>" alt="mini display" id="product-photo" height="100" width="100">
                </a>   
            </div>
            <div class="modal-thumbs-box">
               <a href="#product-photo" onClick="document.getElementById('product-photo').src='<?=$modimage3;?>'">           
                  <img src="<?=$modimage3;?>" alt="mini display" id="product-photo" height="100" width="100">
                </a>   
            </div>
            <div class="modal-thumbs-box">
               <a href="#product-photo" onClick="document.getElementById('product-photo').src='<?=$modimage4;?>'">                  
                    <img src="<?=$modimage4;?>" alt="mini display" id="product-photo" height="100" width="100">
               </a>
            </div>
            <div class="modal-thumbs-box">
               <a href="#product-photo" onClick="document.getElementById('product-photo').src='<?=$modimage5;?>'">           
                  <img src="<?=$modimage5;?>" alt="mini display" id="product-photo" height="100" width="100">
                </a>
            </div>
            <div class="modal-thumbs-box">
               <a href="#modal-thumbs-box" onClick="document.getElementById('product-photo').src='<?=$modimage6;?>'">                  
                    <img src="<?=$modimage6;?>" alt="mini display" id="product-photo" height="100" width="100">
                </a>   
            </div>
          </div>
        </div>
        <div id="modal-product-right">
          <div id="modal-product-sizes">
          <h4> Choose Your Style  </h4>
         <select id="gender">
            <option value="A">Male</option>
            <option value="B">Female</option>
         </select>
            <select id="size">
            </select>
            <select id="color">
            </select>
            </div>
         <script type="text/javascript">
         $(function() {   
         
            $("#size").cascade("#gender", {
               ajax: {
                  url: "pulldown_ext.php"
                  },            
               template: commonTemplate("#size"),
               match: commonMatch
            });
            
            $("#color").cascade("#size", {               
            ajax: {
               url: "pulldown_ext.php"
               },
            template: commonTemplate("#color"),
            match: commonMatch
            });
            
            function commonTemplate("#size") {
               return "<option value='" + <?=$s;?> + "'>"<?=$s;?>"</option>";
            };
   
            function commonTemplate("#color") {
               return "<option value='" + <?=$c;?> + "'>" + <?=$c;?> + "</option>";
            };
            
            function commonMatch(selectedValue) {
               return this.When == selectedValue;
            };
            
         });
      </script>
          <?

# Let's see if this product is available

$sql="Select active from kpb_products where size='$s' and gender='$g' and color='$c'";



$result=mysql_query($sql);

$row=mysql_fetch_array($result);

$active=$row["active"];

// attempt to insert locked add to cart button

If($g=="" || $_REQUEST["c"]=="" || $s=="" || $active=="no")
                  {
                     ?>
                          <p></p>
                          <div id="modal-product-checkout">
                            <!-- make hoverbox saying "choose gender, color, size first" --><img class="modal-inactive-btn" src="../files/css/images/squid_add_to.png" />
                          </div>
                          <?
                  }
                  
// end of attempt                  

If($g<>"" AND $_REQUEST["c"]<>"" AND $s<>"" AND $active<>"no")

{

?>
          <p></p>
          <div id="modal-product-checkout">
            <form action="../cart/cart.php" method="post">
              <input type="hidden" name="color" value="<?=$c;?>">
              <input type="hidden" name="size" value="<?=$s;?>">
              <input type="hidden" name="itemid" value="<?=$id;?>">
              <input type="hidden" name="gender" value="<?=$g;?>">
              <input type="image" name="submit" src="../files/css/images/squid_add_to.png">
            </form>
          </div>
          <?

}

If($g<>"" AND $c<>"" AND $s<>"" AND $active=="no")

{

?>
          <h3>Sorry, Product Unavailable</h3>
          <div id="modal-product-checkout"> We are sorry, but this product is currently <br>
            sold out in this variety. </div>
          <?

}

?>
          <!-- second copy box starts here -->
          <div id="modal-extended-copy">
            <?=$description2;?>
          </div>
          <!-- second copy box ends here -->
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div id="inner-footer">
      <div id="secondary-nav">
        <ul>
          <li class="secondary-nav-first"><a href="../pages/contact/index.php">contact us</a></li>
          <li class="secondary-nav-second"><a href="../pages/faq/index.php">faq</a></li>
          <li class="secondary-nav-last"><a href="../pages/size-and-fit/index.php">size &amp; fit</a></li>
        </ul>
      </div>
      <div id="inkspot"> <a href="../index.php"><img src="../files/css/images/squid_medallion_alternate.png" style="padding-top: 5px;" /></a> </div>
      <div id="send-us-art">
        <ul>
          <li><a href="../pages/ideas/index.php">submit art or ideas</a></li>
        </ul>
      </div>
      <div id="footer-copyright">
        <p>Copyright &copy; 2009 </p>
      </div>
    </div>
  </div>
  <!-- end of footer -->
</div>
</body>
</html>