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

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

Reply via email to