• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 371
  • Last Modified:

Comboboxes cascading actions

Hi,

Using IE or FF, I've attached some code which work only with the first combobox but NOT with the 2nd in cascade.

Any suggestions ?

Thanks,

Phil
HTML/PHP Main Script (index.php)
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="selectinfo.js"></script>
</head>
<body><form name="info"> 
Select an item :
<select name="infomain" onchange="showinfo1()">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</form>
 
Info 1 :
<div id="divinfo1">
<select id="info1"  onchange="showinfo2()">
<option value="XXX">XXXXXX</option>
</select>
</div>
<br>
Info 2 :
<div id="divinfo2">
<select id="info2">
<option value="XXX">XXXXXX</option>
</select>
</div>
 
</body>
</html> 
----------------------------------------------------------------
Javascript (selectinfo.js)
 
var xmlHttp
 
function showinfo1()
{ 
	ucxmlHttp("getinfo1.php?q="+ document.info.infomain.value, "divinfo1");
	setTimeout("showinfo2()",1000);
}
 
function showinfo2()
{ 
	ucxmlHttp("getinfo2.php?q="+ document.info.info1.value, "divinfo2")
}
 
function ucxmlHttp(url, divid)
{ 
	xmlHttp = GetXmlHttpObject();
 
	if (xmlHttp==null)
	{
 		alert ("Http Error");
 		return
 	}
	
	url=url+"&sid="+Math.random();
 
	xmlHttp.open("GET",url,true);
	xmlHttp.onreadystatechange = function(foo)
								 { return function()
										{
											if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
											{ 
													document.getElementById(divid).innerHTML=xmlHttp.responseText 
											} 
										}
								 }(divid)
 
	xmlHttp.send(null);
}
 
function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
 	{
 		// Firefox, Opera 8.0+, Safari
 		xmlHttp=new XMLHttpRequest();
 	}
	catch (e)
 	{
 		//Internet Explorer
 		try
  		{
  			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  		}
 		catch (e)
  		{
  			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
 	}
 
	return xmlHttp;
}
----------------------------------------------------------------
PHP getinfo1.php
 
<?php
$q=$_GET["q"];
 
echo "<select id='info1' onchange='showinfo2()'>";
 
echo "<option value='1'>Info ".$q.".1</option>";
echo "<option value='2'>Info ".$q.".2</option>";
echo "<option value='3'>Info ".$q.".3</option>";
 
echo "</select>";
 
?>
 
----------------------------------------------------------------
PHP getinfo2.php
 
<?php
$q=$_GET["q"];
 
echo "<select id='info2'>";
 
echo "<option value='1'>Info ".$q.".2.1</option>";
echo "<option value='2'>Info ".$q.".2.2</option>";
echo "<option value='3'>Info ".$q.".2.3</option>";
 
echo "</select>";
?>

Open in new window

0
s2000_com
Asked:
s2000_com
  • 3
  • 3
1 Solution
 
hieloCommented:
Read comments in code:
HTML/PHP Main Script (index.php)
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="selectinfo.js"></script>
</head>
<body><form name="info"> 
Select an item :
<select name="infomain" onchange="showinfo1()">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</form>
 
Info 1 :
<div id="divinfo1">
<select id="info1"  onchange="showinfo2()">
<option value="XXX">XXXXXX</option>
</select>
</div>
<br>
Info 2 :
<div id="divinfo2">
<select id="info2">
<option value="XXX">XXXXXX</option>
</select>
</div>
 
</body>
</html> 
----------------------------------------------------------------
Javascript (selectinfo.js)
 
var xmlHttp=null;
 
function showinfo1()
{ 
	ucxmlHttp("getinfo1.php?q="+ encodeURIComponent(document.info.infomain.value), "divinfo1",showinfo2);
 
//NO. There is no guarantee that the first call will be done in 1 second. You need to call
//it after the first request has completed!
//	setTimeout("showinfo2()",1000);
}
 
function showinfo2()
{ 
	ucxmlHttp("getinfo2.php?q="+ encodeURIComponent(document.info.info1.value), "divinfo2", null)
}
 
function ucxmlHttp(url, divid, subsequentcall )
{ 
	xmlHttp = GetXmlHttpObject();
 
	if (xmlHttp==null)
	{
 		alert ("Http Error");
 		return
 	}
	
	url=url+"&sid="+Math.random();
 
	xmlHttp.open("GET",url,true);
	
	//no need to double nest functions. divid will be visible within the function below without having to pass it as an argument
	xmlHttp.onreadystatechange = function(){
								if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
								{ 
									document.getElementById(divid).innerHTML=xmlHttp.responseText 
									if( subsequentcall )
										subsequentcall();
								} 
							};
	xmlHttp.send(null);
}
 
function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
 	{
 		// Firefox, Opera 8.0+, Safari
 		xmlHttp=new XMLHttpRequest();
 	}
	catch (e)
 	{
 		//Internet Explorer
 		try
  		{
  			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  		}
 		catch (e)
  		{
  			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
 	}
 
	return xmlHttp;
}
----------------------------------------------------------------
PHP getinfo1.php
 
<?php
$q=$_GET["q"];
 
echo "<select id='info1' onchange='showinfo2()'>";
 
echo "<option value='1'>Info ".$q.".1</option>";
echo "<option value='2'>Info ".$q.".2</option>";
echo "<option value='3'>Info ".$q.".3</option>";
 
echo "</select>";
 
?>
 
----------------------------------------------------------------
PHP getinfo2.php
 
<?php
$q=$_GET["q"];
 
echo "<select id='info2'>";
 
echo "<option value='1'>Info ".$q.".2.1</option>";
echo "<option value='2'>Info ".$q.".2.2</option>";
echo "<option value='3'>Info ".$q.".2.3</option>";
 
echo "</select>";
?>

Open in new window

0
 
s2000_comAuthor Commented:
Hi hielo,

I made the changes but I have still an error : "document.info.info1.value" is null or not an object

Any idea ?

Thanks,

Phil
0
 
hieloCommented:
Use the attached HTML file  - copy and paste from here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="selectinfo.js"></script>
</head>
<body><form name="info" id="info"> 
Select an item :
<select name="infomain" id="infomain" onchange="showinfo1()">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
 
 
Info 1 :
<div id="divinfo1">
<select name="info1" id="info1"  onchange="showinfo2()">
<option value="XXX">XXXXXX</option>
</select>
</div>
<br>
Info 2 :
<div id="divinfo2">
<select name="info2" id="info2">
<option value="XXX">XXXXXX</option>
</select>
</div>
 </form>
</body>
</html> 

Open in new window

0
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
s2000_comAuthor Commented:
Thanks. It works great !
0
 
hieloCommented:
BTW: the reason for the error is that your <FORM> tag is NOT wrapping around ALL the form elements. It needs to enclose the selects as well.
0
 
s2000_comAuthor Commented:
Thanks hielo ! I fixed this too.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now