Solved

Comboboxes cascading actions

Posted on 2008-06-25
6
364 Views
Last Modified: 2010-04-21
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
Comment
Question by:s2000_com
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21867772
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
 

Author Comment

by:s2000_com
ID: 21868365
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
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21868762
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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

Author Closing Comment

by:s2000_com
ID: 31470549
Thanks. It works great !
0
 
LVL 82

Expert Comment

by:hielo
ID: 21869290
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
 

Author Comment

by:s2000_com
ID: 21869985
Thanks hielo ! I fixed this too.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question