Please can someone help with passing of variable for the 3rd menu.
The second menu is populating correctly from the first menu.
The third menu doesn't work because it is not pulling the cat1 & cat2 values.
I suspect it is the "checkNew" function, which I tried (with limited Javascript knowledge) to copy and alter from the "checkSelected" function.
Thanks in advance for your time.
test.php
-----------
<html>
<head><script type="text/javascript">
function checkSelected(origlist) {
var list = document.getElementById(origlist);
var poststr;
poststr += "&cat1=" + encodeURI ( list.options.value );
AjaxCRequest('testA.php', poststr, 'div1', 0);
}
function checkNew(origlist2,catid) {
var list2 = document.getElementById(origlist2);
var cat = document.getElementById(catid);
var poststr2;
poststr2 += "cat2=" + encodeURI ( list2.options.value );
AjaxCRequest('testB.php?&cat1='+cat, poststr2, 'div2', 0);
}
function AjaxCRequest(url, params, target, form) {
// check browser support
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// send data
xmlHttp.onreadystatechange = function() {cRequestHandler(url, target, form);};
xmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(params);
}
function cRequestHandler(url, target, form) {
if (xmlHttp.readyState == 4) { // only if req is "loaded"
if (xmlHttp.status == 200) { // only if "OK"
if (form == 1) {
document.getElementById(target).value = xmlHttp.responseText;
} else {
document.getElementById(target).innerHTML = xmlHttp.responseText;
}
} else {
document.getElementById(target).innerHTML=" cRequest Error:\n"+ xmlHttp.status + "\n" + xmlHttp.statusText;
}
}
}
</script></head>
<body>
<form name="addform" action="test.php" enctype="multipart/form-data" method="post">
<table width="885" align="left" border="0" cellspacing="2" cellpadding="2" class="border">
<tr>
<td align="left" width="170"><b>Dropdown 1:</b></td>
<td align="left" width="715">
<select name="cat1" class="text_black" onChange="javascript:checkSelected('cat1');">
<option value="0">-- select --</option>
<option value="1">Animals</option>
<option value="2">Cars</option>
<option value="3">Plants</option>
</select>
</td>
</tr>
<tr>
<td align="left"><b>Dropdown 2:</b></td>
<td align="left">
<div id="div1">
<select name="cat2" class="text_black">
<option value="0">-- select --</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="left"><b>Dropdown 3:</b></td>
<td align="left">
<div id="div2">
<select name="cat3" class="text_black">
<option value="0">-- select --</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="left"><input name="Submit" type="submit" class="button" value="SAVE"></td>
</tr>
</table>
</form>
</body>
</html>testA.php: (populates 2nd dropdown)
-------------
<?php
$cat1 = $_POST['cat1'];
?><select name="cat2" class="text_black" onChange="javascript:checkNew('cat2','<?php echo $cat1;?>');">
<option value="0">--select--</option>
<?php
if($cat1=='1'){
?>
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Bird</option>
<?php
}elseif($cat1=='2'){
?>
<option value="1">Truck</option>
<option value="2">Sports</option>
<option value="3">Racing</option>
<?php
}else{
?>
<option value="1">Tree</option>
<option value="2">Shrub</option>
<option value="3">Groundcover</option>
<?php
}
?>
</select>testB.php: (populates 3rd dropdown)
-------------
<?php
$cat2 = $_POST['cat2'];
$cat1 = $_POST['cat1'];
?>
<select name="cat3" class="text_black">
<option value="0">--this has selected the 3rd menu--</option>
<option value="test_cat_values_are_posting">cat1:<?php echo $cat1;?> - cat2:<?php echo $cat2;?></option>
</select>
