Welcome to WebmasterWorld Guest from 54.161.110.186

Forum Moderators: open

Message Too Old, No Replies

ajax multi drop down

     
7:42 pm on Sep 13, 2006 (gmt 0)

10+ Year Member



Hello all Ajax Gurus, after a long and frustrating googling I come to ask for your help.

I want to get started with AJAX by doing the following:

I need three dependent drop down boxes, first one is filled with data from my mysql DB (having it's first options as "select one").

When the first drop down changes, the second gets populated with data from my DB.

And then when something is selected in the second drop down, the third drop down gets populated with data from my DB.

To give you an example.

The first drop down is filled with car manufacturers.
After you chose one, the second drop down gets filled with model's of that car manufacturer. And when you select a model the third gets filled with the available years of that specific model.

I found some code but is for ASP or PHP and a text file, but I need to solve this using PHP and mysql.

1:27 am on Sep 22, 2006 (gmt 0)

10+ Year Member



Been googling and googling on this one without help!
12:36 pm on Sep 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Let's do this in two steps: first, have the server send us a nice set of options to use in the select box; second, build the select box.

1. Your PHP script receives a request with a manufacturerID.

<?php 
if (is_numeric(@$_GET['manufacturerID'])) {
// create an XML document
$doc = new DOMDocument ('1.0', 'ISO-8859-1');
// create root-element
$root = $doc->createElement('root');
$root = $doc->appendChild($root);
$doc->preserveWhiteSpace = true;
// query the database
$rs = mysql_query("SELECT id, model FROM models WHERE manufacturerID = $_GET[manufacturerID]");
// now create an option element for each record
while ($row = mysql_fetch_assoc($rs)) {
// attach a new option to the root element
$opt = $root->appendChild($doc->createElement('option'));
// create id element, attach it to the option element
$elId = $opt->appendChild($doc->createElement('id'));
// add textnode to it, containing the model's id
$elId->appendChild($doc->createTextNode($row['id']));
// do the same for the model
$elModel = $opt->appendChild($doc->createElement('model'));
$elModel->appendChild($doc->createCDATASection(rawurlencode($row['model'])));
}
$result = $doc->saveXML();
header('Content-type: application/xml; charset=utf-8');
echo $result;
exit;
}
?>

This should return an xml document that looks more or less like this:
<?xml version="1.0"?> 
<root>
<option>
<id>25</id>
<model><![CDATA[Kadett]]></model>
</option>
<option>
<id>28</id>
<model><![CDATA[Astra]]></model>
</option>
</root>

2. In your JavaScript that sends the XmlHttpRequest, you've set a method called buildSelectBox as the onreadystatechange handler. The name of your request object is myreq.

function buildSelectBox() { 
if (myreq.readyState == 4) {
// create a select element
var sbox = document.createElement('select');
sbox.name = 'models';
// give it an onchange handler
sbox.onchange = 'getAvailableYears';
// now add the options
var opts = myreq.responseXML.getElementsByTagName('option');
for (var i = 0; i < opts.length; i++) {
var op = new Option(
unescape(opts[i].getElementsByTagName('model').item(0).firstChild.data),
unescape(opts[i].getElementsByTagName('id').item(0).firstChild.data),
false, false);
sbox.options[sbox.length] = op;
}
// add the select box to an existing element on the page
document.getElementById('models').appendChild(sbox);
}
}

I haven't really tested all this, but it should get you going.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month