title: Dynamic Drop Down List - PHP and Javascript
body: <p>I am wanting to create a dynamic drop down list based on mysql database and tables. I searched around the net and the closest I came was to <a href="http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php" rel="nofollow">http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php</a></p>
  
  <p>I have implimented this code as per example, the first drop down box works correctly however the second does not get populated once a 'category' is chosen.</p>
  
  <p>The code is:</p>
  
  <p><strong>main.php</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript"&gt;
  
    function AjaxFunction(cat_id) {
      var httpxml;
      try {
        // Firefox, Opera 8.0+, Safari
        httpxml = new XMLHttpRequest();
      } catch (e) {
        // Internet Explorer
        try {
          httpxml = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            httpxml = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
            alert("Your browser does not support AJAX!");
            return false;
          }
        }
      }
      function stateck() {
        if (httpxml.readyState == 4) {
          var myarray = eval(httpxml.responseText);
          // Before adding new we must remove previously loaded elements
          for (j = document.testform.subcat.options.length - 1; j &gt;= 0; j--) {
            document.testform.subcat.remove(j);
          }
          for (i = 0; i &lt; myarray.length; i++) {
            var optn = document.createElement("OPTION");
            optn.text = myarray[i];
            optn.value = myarray[i];
            document.testform.subcat.options.add(optn);
          } 
        }
      }
      var url="dd.php";
      url = url+"?cat_id="+cat_id;
      url = url+"&amp;sid="+Math.random();
      httpxml.onreadystatechange = stateck;
      httpxml.open("GET",url,true);
      httpxml.send(null);
    }
  
  &lt;/script&gt;
  
  &lt;form name="testform" method='POST' action='mainck.php'&gt;Name:&lt;input type=text name=fname&gt;
  Select first one &lt;select name=cat onchange="AjaxFunction(this.value);"&gt;
  &lt;option value=''&gt;Select One&lt;/option&gt;
  &lt;?
  
    require "config.php";// connection to database 
    $q=mysql_query("select * from categories");
    while($n=mysql_fetch_array($q)){
      echo "&lt;option value=$n[cat_id]&gt;$n[category]&lt;/option&gt;";
    }
  
  ?&gt;
  &lt;/select&gt;
  
  &lt;select name=subcat&gt;
  
  &lt;/select&gt;&lt;input type=submit value=submit&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>and dd.php is</strong></p>
  
  <pre><code>&lt;?
  
    $cat_id=$_GET['cat_id'];
    require "config.php";
    $q=mysql_query("select subcategory from subcategory where cat_id='$cat_id'");
    echo mysql_error();
    $myarray=array();
    $str="";
    while($nt=mysql_fetch_array($q)){
      $str=$str . "\"$nt[subcategory]\"".",";
    }
    $str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
    echo "new Array($str)";
  
  ?&gt;
  </code></pre>
  
  <p>As mentioned, main.php loads and populates the first drop down box correctly. Once a value is chosen nothing appears in the second box. To test, I changed the mysql query in dd.php from </p>
  
  <pre><code>$q=mysql_query("select subcategory from subcategory where cat_id='$cat_id'");
  </code></pre>
  
  <p>to</p>
  
  <pre><code>$q=mysql_query("select subcategory from subcategory where cat_id=1");
  </code></pre>
  
  <p>This then populates the second box when a 'category' is chosen. I think the chosen value is not passing from main.php to dd.php correctly with the </p>
  
  <pre><code>$cat_id=$_GET['cat_id'];
  </code></pre>
  
  <p>Any help on this would be appreciated. I have a feeling this is something small but cant quite put my finger on it.</p>
  
  <p>As always many thanks in advance.
  <strong>UPDATED QUESTION</strong></p>
  
  <p><strong>main.php</strong></p>
  
  <pre><code>&lt;form name='testform' method='POST' action='mainck.php'&gt; 
        Name: &lt;input type='text' name='fname'&gt; 
        Select first one 
        &lt;select name='cat' onchange='AjaxFunction(this);'&gt; 
          &lt;option value=''&gt;Select One&lt;/option&gt; 
  
  &lt;?php 
  
    require "config.php";// connection to database 
  
    // I will continue to use mysql_query(), but please migrate you code to 
    // PDO or MySQLi ASAP 
    $query = " 
      SELECT cat_id,category 
      FROM categories
    "; 
    $result = mysql_query($query); 
  
    while ($row = mysql_fetch_assoc($result)) { 
      echo "&lt;option value='{$row['cat_id']}'&gt;{$row['category']}&lt;/option&gt;"; 
    } 
  
  ?&gt; 
  
        &lt;/select&gt; 
        &lt;select name='subcat' id='subcat_select'&gt; 
        &lt;/select&gt; 
        &lt;input type='submit' value='Submit'&gt; 
      &lt;/form&gt; 
  </code></pre>
  
  <p><strong>dd.php</strong></p>
  
  <pre><code>&lt;?php 
  
    require "config.php"; 
  
    $query = " 
     SELECT packcode 
      FROM skudata
      WHERE cat_id='".mysql_real_escape_string($_GET['cat_id'])."'       "; 
    $result = mysql_query($query); 
  
    $array = array(); 
    while ($row = mysql_fetch_assoc($result)) { 
      $array[] = $row['packcode']; 
    } 
  
    echo json_encode($array); 
  
  ?&gt; 
  </code></pre>
  
  <p>with the changes Dave Added, I cant get the new mysql tables and reference columns working. Have tested the mysql and it works well. Any help is appreciated. </p>
  
  <p>Thanks,</p>