A while ago I had to build a registration form which required me to allow a user to select a country, state and then a city. It’s normal for registration forms to require such information and I was looking for a way to do this with ease. There are numerous javascript solutions out there which require page reload, hotmail registration employs such a method. Me being all AJAX crazy went around looking for a solution without page reloads and was disappointed that there was no such ready made solution. But I kept looking.
I came across this very beautiful and useful AJAX solution for PHP. It’s called xajax. From their site :
xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.
It’s a very very useful PHP AJAX toolkit which can do pretty much everything. It’s still in development but Jared White, the admninstrator of the toolkit has done a wonderful job.
I started playing around with the class and soon realised that the class was easy as they come. I’m not going to give the entire code for a country / state / city drop down but I will show you how to list the country / state part, the city part you’ll have to do for yourself.
I created an include file that would include the xajax class and my own functions in one, i’d suggest you do the same.
// File ajax.inc.php
function setCountry($country) {
// Build an array of all states that fall under that country
$states = array();
$q = mysql_query("select * from states where countryid = $country order by statename");
while ($r = mysql_fetch_array($q)) {
$x = $r['stateid'];
$states[$x] = $r['statename'];
}
// Create a new object to handle the outgoing XML.
$o = & new xajaxResponse();
if (count($states) > 0) {
// addScript simply adds the javascript to the response that will be returned to the client.
$o->addScript("document.getElementById('state').disabled = false;");
$o->addScript("document.getElementById('state').options.length = 0;");
$o->addScript("addOption('state','--Select a State--','0');");
foreach ($states as $id => $s)
{
// We add a javascript function call to addOption. this will be defined in the main php script.
$o->addScript("addOption('state','" . htmlentities($s) . "','" . $id . "');");
}
}
// Return the XML to the requesting client
return $o->getXML();
}
// An object of the xajax class, this object will be used throughout.
$xajax =& new xajax();
// Switch on debug output, you can skip this step if you don't want to know what is going on in the background. Good for debugging.
$xajax->debugOn();
// Register the function which we will declare below which will be used in the main script.
$xajax->registerFunction("setCountry");
// Ask the object to handle all requests and to parse and construct XML data.
$xajax->processRequests();
Now for the main script.
//main.php
<html>
<head>
<title>xAjax Example</title>
< ?php $xajax->printJavascript(); ?>
<script type="text/javascript">
<!--
function addOption(selectId, txt, val)
{
var objOption = new Option(txt,val);
document.getElementById(selectId).options.add(objOption);
}
// -->
</script>
</head>
Country : <select name="country" id ="country" onchange="xajax_setCountry(document.getElementById('country').value);">
<option value="0">Select a country</option>
<option value="1">United States</option>
<br /><br />
State : </select><select name="state" id="state" disabled="true">
<o ption value=0>-- Select a State --
</o></select>
</html>
Edit : The code is uploaded here since it doesn’t display properly.
And that’s it. Now whenever you select the country United States from the drop down box, a function will be called and it’ll update the list of states using ajax. It’s worth mentioning that we didn’t write more than 10 lines of javascript code for our ajax application and thats the most you’ll ever need to write with xajax. What can I say, I love the class… 
Feel free to email me or post here with queries, i’ll do my best to answer them.
P.S. My version of wordpress doesn’t allow me to type out HTML without screwing it up, please fix the changes above before you run your script.
No related posts.
i cen not able to download code
Good but I want complete script