Re: PHP MYSQL Dynamic Select Boxes: Please Help

Try asking in a newsgroup or forum specific to javascript, that has nothing to do with PHP Adele Botes wrote:

I have 2 tables: products table product_id (INT 11 AUTOINCRE PRI) product_name (VARCHAR 255) product_desc (VARCHAR 255) color table color_id (INT 11 AUTOINCRE PRI) color (VARCHAR 255) image (VARCHAR 255) product_id (INT 11) I would like to create the first select box (pulling the options from the products table). Then I would like the second select box to display the color option related to the product_id in the first select box, thus changing the options dynamically. I've tried the following and it doesn't seem to work. What am I doing wrong? Please help: <?php include_once("../../config.inc.php"); $DB_NAME = $DB_NAME[0];

if($DB_NAME[0])    {
    global $DB_HOST, $DB_USER, $DB_PASS, $DB_NAME;
    mysql_connect($DB_HOST, $DB_USER, $DB_PASS);
    mysql_select_db($DB_NAME) OR die("MYSQL Error: error selecting DB");
    } // this works

?> <!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" lang="en" xml:lang="en"> <head> <title>Cempave :: Quality cement products</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="<?php print WEB_ROOT;?>html/style.css"> <script type="text/javascript" src="unobtrusivedynamicselect_ex2to4.js"></script>

        <script type="text/javascript">
        window.onload = function() {
            dynamicSelect("pda-brand", "pda-type");
        }
        </script>

</head> <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <form action="#">

    <select id="product_name" name="product_name">
        <option value="select" selected>Select a product...</option>
        <?php
        $sql1 = mysql_query("SELECT * FROM products");
        while ($row = @mysql_fetch_array($sql1))
            {
            $product_id = $row['product_id'];
            $product_name = $row['product_name'];
            print "<option value='$product_name'>$product_name</option>";
            }
        ?>
    </select>
    <!--<table>-->
    <select id="color" name="color">
        <option class="select" value="select" selected>Select a color...</option>
        <?php
        $sql1 = mysql_query("SELECT * FROM products LEFT JOIN color ON products.product_id = color.product_id WHERE color.product_id = '$product_id'");
        while ($row = @mysql_fetch_array($sql1))
            {
            $product_id = $row['product_id'];
            $color_id = $row['color_id'];
            $color = $row['color'];
            //print "<tr><td>$product_id $color_id $color</td></tr>";
            print "<option class='$product_id' value='$color'>$color</option>";
            }
        ?>
    </select>
    <!--</table>-->

</form> </body> </html> This is all the JavaScript code i used: function dynamicSelect(id1, id2) {

    // Feature test to see if there is enough W3C DOM support
    if (document.getElementById && document.getElementsByTagName) {
        // Obtain references to both select boxes
        var sel1 = document.getElementById(id1);
        var sel2 = document.getElementById(id2);
        // Clone the dynamic select box
        var clone = sel2.cloneNode(true);
        // Obtain references to all cloned options
        var clonedOptions = clone.getElementsByTagName("option");
        // Onload init: call a generic function to display the related options in the dynamic select box
        refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
        // Onchange of the main select box: call a generic function to display the related options in the dynamic select box
        sel1.onchange = function() {
            refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
        };
    }

} function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {

    // Delete all options of the dynamic select box
    while (sel2.options.length) {
        sel2.remove(0);
    }
    // Create regular expression objects for "select" and the value of the selected option of the main select box as class names
    var pattern1 = /( |^)(select)( |$)/;
    var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
    // Iterate through all cloned options
    for (var i = 0; i < clonedOptions.length; i++) {
        // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
        if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
            // Clone the option from the hidden option pool and append it to the dynamic select box
            sel2.appendChild(clonedOptions[i].cloneNode(true));
        }
    }

} // Attach our behavior onload window.onload = function() {

    dynamicSelect("product_name", "color");

} Thx in adv Adele