Solved

Comboboxes cascading actions

Posted on 2008-06-25
6
360 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 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
The viewer will learn how to count occurrences of each item in an array.

911 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now