I am assuming you are aware of ajax calls. See the example below for two files which I used to develop an advanced staff search based on four criteria in drop down boxes. The dropdown boxes interact with each other to show the relevant items only. For example if Bristol office only has staff from skill group 1 and 3 then only these two items are shown in skill group drop down list.
I am just adding the code, if time permits I will add some comments:
First file PHP - staffSearchAdvanced.php - this shows the drop downs
Code: Select all
<?php
session_start();
include "../library/commonFunctions.inc.php";
include "../library/config.inc.php";
include "../staff/staffFunctions.inc.php";
$title="Advanced staff search";
addHeader($title,-1);
$GroupName="--";
$fieldText=array('Office','Skill group','Resource manager','Team leader');
$fieldValue=array('Location','Skill','GroupName','TL');
echo"<h4>Advanced search<img src='$infoButtonImage' title='Select a name from the drop down menu'></H4>
<form name=filter method=get>
<table><tr><td width=25%>Filter criteria<td width=25%>Value";
if(isset($_REQUEST['btnSearch'])) //if search button is pressed
{
$fieldsEncoded=$_REQUEST['fields'];
$valuesEncoded=$_REQUEST['values'];
$fieldArray=explode(",",urldecode($fieldsEncoded));
$valueArray=explode(",",urldecode($valuesEncoded));
//writing the first select box
echo" <tr><td><select name=fieldName onchange='javascript:fieldChanged(0)'><option value=0>--</option>";
for ($i=0;$i<4;$i++)
{
$selected="";
if ($fieldValue[$i]==$fieldArray[0])
$selected="selected";
echo"<option $selected value='$fieldValue[$i]'>$fieldText[$i]</option>";
}
echo"</select>";
echo"<td><span name=filterSelection id=filterSelection0><select name=value onchange='javascript:fieldChanged(0)'>";
selectOptions("tblstaff",$valueArray[0],$fieldArray[0],1);
echo"</span>";
for ($i=1;$i<4;$i++)
{
for ($j=0;$j<count($fieldArray);$j++)
{
if($j<$i)
{
$whereClause_j="[$fieldArray[$j]] like '$valueArray[$j]'";
if($whereClause=="")
$whereClause=" where $whereClause_j";
else
$whereClause.=" and $whereClause_j";
}
}
echo"<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged($i)'><option value=0>--</option></select>";
echo"<td><span name=filterSelection id=filterSelection{$i}><select name=value onchange='javascript:fieldChanged($i)'>";
if(isset($valueArray[$i]))
selectOptions("tblstaff",$valueArray[$i],$fieldArray[$i],1,$whereClause);
echo"</select></span>";
}
echo"</table></form>";
}
else
{
$fieldArray=array('0','0','0','0');
$fieldsEncoded='0,0,0,0';
$valueArray=array("%","%","%","%");
$valuesEncoded="%,%,%,%";
echo" <tr><td><select name=fieldName onchange='javascript:fieldChanged(0)'>
<option value=0>--</option>
<option value=Location>Office</option>
<option value=Skill>Skill group</option>
<option value=GroupName>Resource manager</option>
<option value=TL>Team leader</option>
</select>
<td><span name=filterSelection id=filterSelection0>
<select disabled name=value onchange='javascript:fieldChanged(0)'>
<option value='%'>[no selection]</option>
</select>
</span>
<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged(1)'><option value=0>--</option></select>
<td><span name=filterSelection id=filterSelection1 ><select disabled name=value onchange='javascript:fieldChanged(1)'><option value='%'>[no selection]</option></select></span>
<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged(2)'><option value=0>--</option></select>
<td><span name=filterSelection id=filterSelection2><select disabled name=value onchange='javascript:fieldChanged(2)'><option value='%'>[no selection]</option></select></span>
<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged(3)'><option value=0>--</option></select>
<td><span name=filterSelection id=filterSelection3><select disabled name=value onchange='javascript:fieldChanged(3)'><option value='%'>[no selection]</option></select></span>
</table></span></form>";
}
echo"<form name=search method=post>
<input type=hidden name='fields' value='$fieldsEncoded' />
<input type=hidden name='values' value='$valuesEncoded' />
<input type=submit name='btnSearch' value='Show staff' />
</form>
<div id='staffList'>";
if(isset($_REQUEST['btnSearch']))
{
$whereClause="";
for ($j=0;$j<count($fieldArray);$j++)
{
$whereClause_j=("[$fieldArray[$j]] like \"$valueArray[$j]\"");
if($whereClause=="")
$whereClause=" where $whereClause_j";
else
$whereClause.=" and $whereClause_j";
}
writeStaffTableTopLinks("whereClause",$whereClause);
//writeStaffTable("whereClause",$whereClause);
?>
<div id='staffList'></div>
<?php
$whereClause=urlencode($whereClause);
echo "<input id=rm type=hidden value='$whereClause' />";
}
echo"</div>";
?>
<script type=text/javascript>
var xmlHttp=null;
function fieldChanged(myID)
{
//alert (myID)
fieldObj=document.filter.fieldName;
valueObj=document.filter.value;
var vFieldNames="";
var vFieldValues="";
//for(i=myID+1;i<fieldObj.length;i++)
for(i=1;i<fieldObj.length;i++)
{
if(i>myID)
{
valueObj[i].selectedIndex=0;
//valueObj[i].disabled = true;
fieldObj[i].selectedIndex=0;
}
if(valueObj[i-1].value !='%' )
{
fieldObj[i].disabled=false;
k=1;
for(j=1;j<fieldObj[i-1].options.length;j++)
{
if(fieldObj[i-1].value != fieldObj[i-1].options[j].value)
{
elOptNew = document.createElement('option');
fieldObj[i].add(elOptNew);
fieldObj[i].options[k].text=fieldObj[i-1].options[j].text;
fieldObj[i].options[k].value=fieldObj[i-1].options[j].value;
k++;
}
}
}
else
{
fieldObj[i].selectedIndex=0;
fieldObj[i].disabled=true;
}
}
for(i=0;i<fieldObj.length;i++)
{
if(fieldObj[i].value==0)
valueObj[i].disabled=true;
else
valueObj[i].disabled=false;
for(j=1;j<fieldObj[i].options.length;j++)
if(fieldObj[i].options[j].text=="")
{
fieldObj[i].remove(j);
j--;
}
}
populateValues(myID,1);
}
window.onload=function ()
{
fieldObj=document.filter.fieldName;
valueObj=document.filter.value;
var vFieldNames=unescape(document.search.fields.value).split(",");
var vFieldValues=unescape(document.search.values.value).split(",");
fieldObj[0].value=vFieldNames[0];
valueObj[0].value=vFieldValues[0];
for(i=1;i<vFieldNames.length+1;i++)
{
if(vFieldValues[i-1] !='%' )
{
fieldObj[i].disabled=false;
k=1;
for(j=1;j<fieldObj[i-1].options.length;j++)
{
if(fieldObj[i-1].value != fieldObj[i-1].options[j].value)
{
elOptNew = document.createElement('option');
fieldObj[i].add(elOptNew);
fieldObj[i].options[k].text=fieldObj[i-1].options[j].text;
fieldObj[i].options[k].value=fieldObj[i-1].options[j].value;
k++;
}
}
fieldObj[i].value=vFieldNames[i];
valueObj[i].value=vFieldValues[i];
}
else
{
fieldObj[i].selectedIndex=0;
fieldObj[i].disabled=true;
}
if(fieldObj[i].value==0)
valueObj[i].disabled=true;
else
valueObj[i].disabled=false;
}
}
function populateValues(id,refresh)
{
idGlobal=id;
fieldObj=document.filter.fieldName;
valueObj=document.filter.value;
if(refresh)
{
var listObj=document.getElementById("staffList");
listObj.innerHTML="";
var fields=fieldObj[0].value
var values=valueObj[0].value;
for (i=1;i<4;i++)
{
if(fieldObj[i].value!=0)
{
fields=fields+","+fieldObj[i].value
values=values+","+valueObj[i].value;
}
}
document.search.fields.value=escape(fields);
document.search.values.value=escape(values);
}
else
{
fields=document.search.fields.value;
values=document.search.values.value;
}
arg="?fields="+escape(fields)+"&values="+escape(values);
xmlHttp=GetXmlHttpObject();
var url="staffSearchAdvanced.ajax.php"
url=url+arg+"&id="+id+"&sid="+Math.random();
xmlHttp.onreadystatechange=valueChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
return xmlHttp;
}
function valueChanged()
{
var idINT=parseInt(idGlobal);
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var spanObj=document.getElementById("filterSelection"+idINT);
spanObj.innerHTML=xmlHttp.responseText;
}
}
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;
}
</script>
Second file - staffSearchAdvanced.ajax.php - handles ajax requests from javascript
Code: Select all
<?php
session_start();
include "../library/commonFunctions.inc.php";
include "../library/config.inc.php";
$fieldValue=array("Location","Skill","GroupName","TL");
$fieldText=array("Office","Skill group","Resource manager","Team leader");
$selectID=$_GET['id'];
$fieldArray=explode(",",urldecode($_GET['fields']));
$valueArray=explode(",",urldecode($_GET['values']));
$whereClause="";
for ($j=0;$j<$selectID;$j++)
{
//if($j<$selectID)
{
$whereClause_j="$fieldArray[$j] like \"$valueArray[$j]\"";
if($whereClause=="")
$whereClause=" where $whereClause_j";
else
$whereClause.=" and $whereClause_j";
}
}
echo"<select name=value onchange='javascript:fieldChanged(\"$selectID\")'>";
selectOptions("Staff",$valueArray[$selectID],$fieldArray[$selectID],1,$whereClause);
echo"</select>";
?>