hi,
i got 3 drop down list: name, gender and age
upon selecting any one of them, it will change the value of the other 2 according. for example, if i select gender as male, i want to show all male names and all age who belong to a male user. im able to do it with 2 drop down list using ajax but havin difficult with 3 drop down list. here is my code for 2 drop down list:
select.html
<?php
/***********************gender****************************/
$query = "SELECT DISTINCT gender FROM user";
$result = mysql_query($query);
$str1 ="<select name=\"gender\" onchange=\"htmlData('user.php', 'gender='+this.value, 'nameresult')\">";
while($rs = mysql_fetch_assoc($result)){
$str1 .= '<option value="'.$rs['gender'].'">'.$rs['gender'].'</option>';
}
$str1 .= '</select>';
/***********************firstname lastname****************************/
$query = "SELECT id,firstname,lastname FROM user";
$result = mysql_query($query);
$str2 ="<select name=\"name\" onchange=\"htmlData('user.php', 'name='+this.value, 'genderresult')\">";
while($rs = mysql_fetch_assoc($result)){
$str2 .= '<option value="'.$rs['id'].'">'.$rs['firstname'].' '.$rs['lastname'].'</option>';
}
$str2 .= '</select>';
?>
<html>
<head>
<title>User List</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<form method="post">
<div id="genderresult"><?php echo $str1;?></div>
<div id="nameresult"><?php echo $str2;?></div>
</form>
</body>
</html>
user.php
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
if(isset($_GET['gender'])){
$query = "SELECT firstname, lastname FROM user WHERE gender='".$_GET['gender']."'";
$result = mysql_query($query);
$str ='<select name="gender">';
while($rs = mysql_fetch_assoc($result)){
$str.= '<option value="'.$rs['firstname'].'">'.$rs['firstname'].' '.$rs['lastname'].'</option>';
}
$str .= '</select>';
}
if(isset($_GET['name'])){
$query = "SELECT gender FROM user WHERE id='".$_GET['name']."'";
$result = mysql_query($query);
$str ='<select name="name">';
while($rs = mysql_fetch_assoc($result)){
$str.= '<option value="'.$rs['gender'].'">'.$rs['gender'].'</option>';
}
$str .= '</select>';
}
echo $str;
?>
ajax_req.js
function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtResult").innerHTML= xmlHttp.responseText;
}
else {
//alert(xmlHttp.status);
}
}
// Will populate data based on input
function htmlData(url, qStr,tag)
{
if (url.length==0){
document.getElementById(tag).innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
alert ("Browser does not support HTTP Request");
return;
}
url=url+"?"+qStr;
url=url+"&sid="+Math.random();
//xmlHttp.onreadystatechange=stateChanged;
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById(tag).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
}
