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">&nbsp;</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>

Recommended Answers

All 4 Replies

Ficus,

Try these changes (everything else stays the same).

Can't test without turning on The Terminator, my dev machine, so will probably still need debugging but you should get the gist of it.

Notes

  • I have hard-coded 'cat1' in checkNew(). There's no need to send it to the server and back as checkNew() is single-purpose, not reused. This simplified things a lot, and was maybe one cause of the problem you were having.
  • In checkNew() document.getElementById() is unavoidable(?), note the back compatibility for (some) older browsers.
  • In checkSelected() and checkNew() poststr is built with an array join. This is good practise as it avoids potential misuse of + (which has two meanings in js).
  • Passing this to the select menu handlers saves the need for document.getElementById().
  • In checkNew() poststr is built with both cat1 and cat2 values (correctly I hope).
  • In HTML, onselect should be onselect="foo();" not onselect="javascript:foo();" , unlike with href, where a URL is expected and you have to tell the browser if it's javascript (but there's no real need to do that either).
  • In testA.php I have replaced if/else if/else with a switch structure, which is much neater.

Javascript:

function checkSelected(list) {
	var poststr = ['cat1=', encodeURI(list.options.value)].join('');
	AjaxCRequest('testA.php', poststr, 'div1', 0);
}
function checkNew(list) {
	var cat = (document.getElementById) ? document.getElementById('cat1') : document.all['cat1'];
	var poststr = ['cat1=', encodeURI(cat.options.value), '&cat2=', encodeURI(list.options.value)].join('');
	AjaxCRequest('testB.php, poststr, 'div2', 0);
}

HTML

<select name="cat1" class="text_black" onChange="checkSelected(this);">

*** testA.php ***

<?php
$cat1 = $_POST['cat1'];
?>
<select name="cat2" class="text_black" onChange="checkNew(this);">
	<option value="0">--select--</option>
<?php
switch($cat1) {
case '1':
?>
	<option value="1">Cat</option>
	<option value="2">Dog</option>
	<option value="3">Bird</option>
<?php
	break;
case '2':
?>
	<option value="1">Truck</option>
	<option value="2">Sports</option>
	<option value="3">Racing</option>
<?php
	break;
default:
?>
	<option value="1">Tree</option>
	<option value="2">Shrub</option>
	<option value="3">Groundcover</option>
<?php
}
?>
</select>

Let us know how it goes.

Airshow

Everything has been configured according to the code's the you've provided.
All codes is as follows:

Starting Page

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Browser Information</title>
<style type="text/css">
/* <![CDATA[ */

html, body {
  border : none;
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

form { 
  border : none;
  margin : 0;
  padding : 0; }

div#main {
  border : none;
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden;
}

  table {
  border : none;
  border-collapse;
  margin : 1em auto 0 auto;
  padding : 0;
  text-align : left;
  width : 100%; }

  td, th {
  border-top : 1px solid;
  font : normal normal normal 12pt Verdana, Arial, sans-serif;
  border-bottom : 1px solid;
  white-space : pre;
  vertical-align : middle;
  padding : .300em 1em .300em 1em; }
  td { width : 35%; }
  select { margin : 0 auto; width : 85%; }
  table th:first-child {
  letter-spacing : 2px;
  border-right : 1px solid;
  background-color : #ccc;
  width : 30% !important; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

var poststr, xmlHttp, reqText;
var list2, cat, poststr2;
var checkSelected;
var AjaxCRequest;
var cRequestHandler;
var checkNew;

cRequestHandler = function( url, isTarget, isForm ) {
   reqText = xmlHttp.responseText;

   isTarget = (( document.getElementById ) ? document.getElementById( isTarget ) : document.all[ isTarget ] );

   if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) { // i skipped the xmlHttp.status statement, for offline run. But if you need it, then simply add the whole stament again starting on this line. 
         if ( isForm === 1 ) {
         isTarget.value = reqText;
         } else {
         isTarget.innerHTML = reqText;
         }
      } else {
      isTarget.innerHTML = "cRequest Error:\n" + (( xmlHttp.status ) ? xmlHttp.statust : "<span style=\"color : #F00; letter-spacing : 2px;\">Undefined Request Status -</span><br />" ) + "\n" + (( xmlHttp.statusText ) ? xmlHttp.statusText : "<span style=\"color : #F00; letter-spacing : 2px;\">Undefined Request Text Status -</span><br />\n" );
      }
};

AjaxCRequest = function( url, params, isTarget, isForm ) {
   xmlHttp = null;
   try {
      if ( window.XMLHttpRequest ) {
      xmlHttp = new XMLHttpRequest();
      } else if ( window.ActiveXObject ) {
         try {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch( ms ) {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
   } catch( e ) {
      if ( window.createRequest ) {
      xmlHttp = window.createRequest();
      } else {
      xmlHttp = null;
      }
   }
   if ( xmlHttp !== null ) {
      xmlHttp.onreadystatechange = function( ) {
      cRequestHandler( url, isTarget, isForm );
      };
   xmlHttp.open( "POST", url, true );
      if ( xmlHttp.setRequestHeader ) {    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlHttp.setRequestHeader("Content-length", params.length);
      xmlHttp.setRequestHeader("Connection", "close" )
      } xmlHttp.send( params );
   } else { 
   alert("Your Browser does not support AJAX Request!");
   }
};

checkSelected = function( origlist ) {
   origlist = (( document.getElementById ) ? document.getElementById( origlist ) : document.all[ origlist ] );
   poststr = "&cat=" + encodeURIComponent( origlist.options[ origlist.selectedIndex ].value );

   AjaxCRequest("testA.php", poststr, "div1", 0);
};

checkNew = function( origlist2, catid ) {
   origlist2 = (( document.getElementById ) ? document.getElementById( origlist2 ) : document.all[ origlist2 ] );
   catid = (( document.getElementById ) ? document.getElementById( catid ) : document.all[ catid ] );
   poststr2 = encodeURIComponent( origlist2.options[ origlist2.selectedIndex ].value );
   AjaxCRequest(("testB.php?&cat1=" + catid ), poststr2, "div2", 0);
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">
<h2 class="m-title">Javascript Live Demo</h2>

<form id="addform" action="./test.php" enctype="multipart/form-data" method="post">
<table frame="void" rules="none" summary="AJAX PHP multiple dropdown">
<tr>
<th><label for="cat1">DropDown 1:</label></th>
<td style="text-align:center;"><select class="text_black" id="cat1" name="cat1" onchange="checkSelected('cat1');" size="1">
<option value="0">-- select --</option>
<option value="1">Animals</option>
<option value="2">Cars</option>
<option value="3">Plants</option>
</select>
</td>
</tr>
<tr>
<th><label for="cat2">DropDown 2:</label></th>
<td style="text-align:center;"><div id="div1"><select class="text_black" id="cat2"  name="cat2" size="1">
<option value="0">-- select --</option>
</select></div></td>
</tr>
<tr>
<th><label for="cat3">DropDown 3:</label></th>
<td style="text-align:center;"><div id="div2"><select id="cat3" name="cat3" size="1">
<option value="0">-- select --</option></select></div></td>
</tr>
<tr><td colspan="2" style="text-align: left">
<input type="submit" class="button" id="sbm" name="sbm" value=" SAVE " />

</td></tr>
</table>
</form>
</div>
</div>
</body>
</html>

testA.php

<?php 
$cat1 = $_POST['cat1']; ?>
<label for="cat2">DropDown 2: <select id="cat2" name="cat2" onchange="checkNew('cat2', '<?php echo $cat1 ?>');" size="1">
<option value="0">-- select --</option>
<?php 
if( $cat1 == '1' ) { ?>
<option value="0">-- select --</option>
<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></label>

Just don't forget to check my PHP syntax.

Simply do the same with testB.php

thanks so much Airshow i was able to solve my problem with your code. thanks also to essential appreciate the effort.

Cheers Ficus,

You might also want to look at Essential's improvements to cRequestHandler() and AjaxCRequest() which look pretty cool. The code has some good safety in it, which, from Essential, means safe-as-houses.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.