|
|
|
Create AJAX Dynamic Drop Down List using PHP - xajax |
|
Friday, 09 March 2007 |
|
Step By Step Tutorial how to create related Parent - Child AJAX Dynamic Drop Down List Using xajax PHP library Sometimes we want to create Parent Child related Drop Down list, for example in registration form. The related parent - child drop down list for example in State - Town, Products - Items etc. We want the child options refresh if the parnt option changed, without reloading the page. So we face with AJAX application. In PHP there is ajax framework, named xajax ( http://www.xajaxproject.org ) that can help us building ajax aplication easily.
Please follow these step to create dynamic related parent child drop down list - Download xajax from http://www.xajaxproject.org, then extract it
- Create this script in your web app directory, same level with extracted xajax.
You can modify the array data, for example querying to database
dynDropDown.php
<? require_once('xajax.inc.php'); class myXajaxResponse extends xajaxResponse { function addCreateOptions($sSelectId, $options) { $this->addScript("document.getElementById('".$sSelectId."').length=1"); if (sizeof($options) >0) { foreach ($options as $option) { $this->addScript("addOption('".$sSelectId."','".$option."','".$option."');"); } } } } ?> <? $mode = array('air','water','land'); $transports = array( 'air'=>array('plane','helicopter','air-baloon'), 'water'=>array('boat','watersky','submarine'), 'land'=>array('motorcycle','car') ); $brands = array( 'plane'=>array('Boeing707', 'F-16', 'Columbia'), 'helicopter'=>array('BayWatch Heli', 'Police Heli'), 'air-baloon'=>array('Zeppelin'), 'boat'=>array('Baywatch Safeguard Boat', 'JetBoat'), 'watersky'=>array('JetSky','Board-Sky'), 'submarine'=>array('K-19'), 'motorcycle'=>array("Yamaha", "Harley Davidson", "Ducati"), 'car'=>array("Hummer", "Renault", "Porsche") ); $xajax = new xajax(); //$xajax->debugOn(); // adds an option to the select function addTransports($selectId, $mode) { global $transports; $objResponse = new myXajaxResponse(); $data = $transports[$mode]; $objResponse->addCreateOptions($selectId, $data); return $objResponse->getXML(); } function addBrands($selectId, $transport) { global $brands; $objResponse = new myXajaxResponse(); $data = $brands[$transport]; $objResponse->addCreateOptions($selectId, $data); return $objResponse->getXML(); } $xajax->registerFunction("addTransports"); $xajax->registerFunction("addBrands"); $xajax->processRequests(); ?> <? if (isset($_POST['Submit'])) { print_r($_POST); } ?> <html> <head> <title>AJAX Dynamic Drop Down Tutorial</title> <? $xajax->printJavascript(); ?> <script type="text/javascript"> function addOption(selectId, val, txt) { var objOption = new Option(txt, val); document.getElementById(selectId).options.add(objOption); } </script> </head> <body> <form name="form1" method="POST" action=""> Type : <select name="type" id="type" onchange="xajax_addTransports('transports', document.form1.type.value)"> <option value="">--select--</option> <? foreach ($mode as $mod) { ?> <option value="<?= $mod?>"><?= $mod?></option> <? } ?> </select> Transportation : <select name="transports" id="transports" onchange="xajax_addBrands('brands', document.form1.transports.value)"><option value="">--select--</option> </select> Brands : <select name="brands" id="brands"><option value="">--select--</option> </select> <input type="submit" value="Submit" name="Submit" id="Submit"> </form> </body> </html>
- Directory folder will look like this
| xajax.inc.php | xajaxCompress.php | xajaxResponse.inc.php | dynDropDown.php | /---xajax_js xajax.js xajax_uncompressed.js
- Call dynDropDown.php with your browser
|
|
There are 220 free ajax scripts and 31 categories in our directory
|