[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Comboboxes cascading actions

Posted on 2008-06-25
6
Medium Priority
?
370 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
  • 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 2000 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses
Course of the Month17 days, 22 hours left to enroll

830 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