Solved

Comboboxes cascading actions

Posted on 2008-06-25
6
359 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

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 …
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

708 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

15 Experts available now in Live!

Get 1:1 Help Now