[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

Solved

Comboboxes cascading actions

Posted on 2008-06-25

AJAX
PHP

1 solution

Medium Priority

367 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 2000 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

Understanding Client/Server Protocols and Web Applications

Article by: Ray

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…

4 Methods for creating image overlays in HTML using CSS and PHP GD2

Article by: Julian

This article discusses four methods for overlaying images in a container on a web page

Matching Tagged Data with PHP Regular Expressions

Video by: Terry

Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…

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…