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
