Solved

Comboboxes cascading actions

Posted on 2008-06-25

AJAX
PHP

1 solution

365 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

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

Join The Community

6 Comments

LVL 82

Expert Comment

by:hielo

ID: 218677722008-06-25

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

Author Comment

by:s2000_com

ID: 218683652008-06-25

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

LVL 82

Accepted Solution

by:hielo

hielo earned 500 total points

ID: 218687622008-06-25

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

Author Closing Comment

by:s2000_com

ID: 314705492008-06-25

Thanks. It works great !

LVL 82

Expert Comment

by:hielo

ID: 218692902008-06-25

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.

Author Comment

by:s2000_com

ID: 218699852008-06-25

Thanks hielo ! I fixed this too.

Featured Post

Question has a verified solution.

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

Selecting the ideal social networking tool - Yammer or SharePoint Social

Article by: Shakshi

These days socially coordinated efforts have turned into a critical requirement for enterprises.

AJAX form submission with customized server field validation

Article by: Julian

This article discusses how to implement server side field validation and display customized error messages to the client.

Validation of Email Addresses with Regular Expressions

Video by: Terry

Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

How to Add a Watermark to an Image Using PHP (Part 2)

Video by: Marco

This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.