How to retrieve table after third dropdownlist is selected in ajax

Hi i am new in php javascript. Firstly sorry for the long post. i am having 3 sets of drop down list. i am trying to display the table when i selected the last dropdown list. all example are shows for only one dropdown only. Help are really appreciated!! Thanks in advance. :slight_smile:

here is my javascript code

<script type= "text/javascript">

function ajaxFunction(choice)
{
	var httpxml;
	try
	{
		httpxml=new XMLHttpRequest();
	}
	catch (e)
	{
		try
		{
			httpxml=new ActiveXObject("Msxml2.XMLHTTP");
		}
			catch (e)
			{
				try
				{
					httpxml=new ActiveXObject("Microsoft.XMLHTTP");
				}
					catch (e)
					{
						alert("Your browser does not support AJAX!");
						return false;
					}
			}
	}
	
	function stateChanged()
	{
		if(httpxml.readyState==4)
		{
			
			var myObject = JSON.parse(httpxml.responseText); //received the data
			
			for(j=document.myForm.PTT.options.length-1; j>=0; j--)
			{
				document.myForm.PTT.remove(j);
			}
			
			var PTT1=myObject.value.PTT1;
			
			var optn = document.createElement("OPTION");
			optn.text = 'Select PTT';
			optn.value = '';
			document.myForm.PTT.options.add(optn);
			
				for (i=0; i<myObject.PTT.length; i++)
				{
					var optn = document.createElement("OPTION");
					optn.text = myObject.PTT[i];
					optn.value = myObject.PTT[i];
					document.myForm.PTT.options.add(optn);
					
					if(optn.value==PTT1)
					{
						var k = i+1;
						document.myForm.PTT.options[k].selected=true;
						//document.myForm.PTT.options[i].selected= true;
					}
				}
				
				for (j=document.myForm.EXT.options.length-1; j>=0; j--)
				{
					document.myForm.EXT.remove(j);
				}
				var EXT1=myObject.value.EXT1; // this one is the problem cause. forgot to add value.
				
				for (i=0; i<myObject.EXT.length; i++)
				{
					var optn = document.createElement("OPTION");
					optn.text = myObject.EXT[i];
					optn.value = myObject.EXT[i];
					document.myForm.EXT.options.add(optn);
					
					if(optn.value==EXT1)
					{
						var h = i+1;
						document.myForm.EXT.options[i].selected=true;
					}
				}
				//document.getElementById("txtHint").style.background='#00f040';
				document.getElementById("txtHint").innerHTML = httpxml.responseText;	
		}
	}
	var url="checking2.php";
	var REGION=myForm.REGION.value;
	
	if(choice != 's1')
	{
		var PTT=myForm.PTT.value;
		var EXT=myForm.EXT.value;
	}
	else{
		var PTT = '';
		var EXT = '';
	}
	
	url=url+"?REGION="+REGION; // all this three will temporary store the selection values.
	url=url+"&PTT="+PTT;
	url=url+"&EXT="+EXT;
	
	myForm.st.value=PTT; //why is this needed.
	/*
	var message=myObject.value.message;
	var bgcolor=myObject.value.bgcolor;
	///////////////////////////////////
	var str="<table width='200' align=center>";
		for(i=0;i<myObject.data.length;i++)
		{ 
			str = str + "<tr bgcolor='#f1f1f1'><td >ID:</td><td>" + myObject.data[i].ID + " </td></tr>";
			str = str + "<tr ><td >REGION</td><td>" + myObject.data[i].REGION + " </td></tr>";

			str = str + "<tr bgcolor='#f1f1f1'><td>EXT</td><td>"+ myObject.data[i].EXT + "</td></tr>";
			str = str + "<tr><td>PTT</td><td>"+ myObject.data[i].PTT + "</td></tr>";
		}
		str = str + "</table>" ; 

	document.getElementById("display").innerHTML=str;
	////////////////////////////////////*/
	
	document.getElementById("txtHint2").innerHTML = url; //this will display the selection output. 
	httpxml.onreadystatechange=stateChanged;
	httpxml.open("GET",url,true);
	httpxml.send(null);
	
	//document.getElementById("txtHint").innerHTML="Please Wait...";
	//document.getElementById("txtHint").style.background='#f1f1f1';
}
</script>

here, where i can make the selection.

<form name="myForm" method='POST' action='details2.php'>
<input type=hidden name=st value=0>
<table width= 1000>
<tr><td>
<label>Select Region :</label><select name=REGION id='s1' onchange=ajaxFunction('s1');>
<option value=''>Select One</option>

<?php
	include "config2.php";
	$sql="SELECT DISTINCT REGION FROM all_exchangelist";
	
	foreach ($dbo->query($sql)as $row)
	{
		echo "<option value= $row[REGION]>$row[REGION]</option>";
	}
	?>
</select>

</td><td><label>Select PTT :</label><select name=PTT onchange=ajaxFunction('s2');>
<option value=''>Select One</option>
</select></td>
<td><label>Select Exchange:</label><select name=EXT onchange="ajaxFunction(this.value)";> 
<option value=''>Select One</option>
</select></td>
</tr></tr>
<tr><td colspan=3><input type=submit value='Submit'></td></tr>
</form>
</table>
<br>
<br> 
<div id="txtHint2"></div>

this code are to check the validation of selection form.

<?php
include "config2.php";

error_reporting(0);

$REGION=$_GET['REGION'];
$PTT1=$_GET['PTT'];
$EXT1=$_GET['EXT'];

/*if((strlen($REGION))) > 0 and (!ctype_alpha($REGION)))
{
	echo "Data Error";
	exit;
}

if((strlen($PTT1)) > 0 and ctype_alpha(str_replace(' ', '', $PTT1)) === false)
{
	echo "Data Error";
	exit;
}*/

if(strlen($REGION) > 0)
{
	$q_REGION= "Select distinct PTT from all_exchangelist where REGION = '$REGION' ";
}
else {
	$q_REGION= "Select PTT from all_exchangelist";
}

$sth = $dbo->prepare($q_REGION);

$sth->execute();
$PTT = $sth->fetchAll(PDO::FETCH_COLUMN);

$q_PTT="Select distinct EXT from all_exchangelist where ";
if(strlen($REGION) > 0)
{
	$q_PTT = $q_PTT . " REGION = '$REGION' ";
}

if(strlen($PTT1) > 0)
{
	$q_PTT= $q_PTT . " and PTT= '$PTT1'";
}
$sth = $dbo->prepare($q_PTT);
$sth->execute();
$EXT = $sth->fetchAll(PDO::FETCH_COLUMN);
/*
//////////
$sql="select * from all_exchangelist where"; 
$row=$dbo->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);
/////////*/

$main = array('PTT'=>$PTT, 'EXT'=>$EXT, 'value'=>array("PTT1"=>"$PTT1", "EXT1"=>"$EXT1"));
echo json_encode($main);

?>

this one will display all the selection url.

<body>
	<?php
	include "config2.php";
	include 'trying2.php';
		echo "Region : $_POST[REGION] <br>
		Ptt : $_POST[PTT]<br>
		Ext : $_POST[EXT]<br>
		<br>
		<br>
		
		
		
		Return to <a href=trying2.php>Selection Page</a>";
	
	
	?>

Well at least they changed it from make and model of car this semester…

Basically, you’ll need a more clever function, that can distinguish between PTT and EXT for data retrieval.

[Moderator: Flagging this for movement to the Javascript section, as the current vexation is with the Javascript elements of the question.]

Not a moderator, but moved for you.

you mean i need to create 2 more functions? for example function getPTT() and function getEXT() inside the ajax script?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.