Forum Moderators: coopster
//globals
var first = "topic"; //id of first SELECT
var second = "subcats"; //id of second SELECT
var second = "subcats2"; //id of third SELECT
//
function sendRequest(url,params,HttpMethod) {
if(!HttpMethod) { //check if http method is defined, if not, set it to GET
HttpMethod="GET";
}
//
// initialize request object
req=null;
if(window.XMLHttpRequest){
req=new XMLHttpRequest; //mozilla/safari
} else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHTTP"); //internet explorer
}
//
//define callback handler
if(req) {
//
req.onreadystatechange=onReadyState;
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(params);
}
}
//
function onReadyState() {
//
var ready=req.readyState;
var data=null;
if(ready==4){ //check ready state
data=req.responseText; //read response data
var items = data.split(',');
var length = items.length;
for(var i = 0; i < length; i++) {
var childEl = document.createElement('option'); //create option
var El = document.getElementById(second);
var El2 = document.getElementById(third);
El.appendChild(childEl); //then append it to the second dropdown list
El2.appendChild(El); //then append it to the second dropdown list
childEl.value = items[i];
childEl.innerHTML = items[i];
}
}
}
//
function clicked() {
//
var el = document.getElementById(first);
var ob2=document.getElementById(second);
var ob3=document.getElementById(third);
var selected = el.selectedIndex;
//
while(ob2.hasChildNodes()) { //removes items from dropdown if some already exist
ob2.removeChild(ob2.firstChild);
}
while(ob3.hasChildNodes()) { //removes items from dropdown if some already exist
ob3.removeChild(ob3.firstChild);
}
if(selected!= 0) { //if they choose something other than the first select-->"Select topic first"
sendRequest('fetch.php?topic='+el.options[selected].value);
ob2.disabled=0;
} else { //otherwise add the Select Topic First option and disable it
var childEl = document.createElement('option');
ob2.appendChild(childEl);
childEl.innerHTML = 'Select Topic First';
ob2.disabled=1;
var El = document.createElement('option');
ob3.appendChild(El);
El.innerHTML = 'Select Topic First';
ob3.disabled=1;
}
}
fetch.php
<?php
if(empty($_GET['topic'])) { # if url query is left empty, do nothing but terminate the script
exit();
}
$topic = $_GET['topic'];
$link = mysql_connect("127.0.0.1","root","");
mysql_select_db("dropdown");
#
#select records based on 'topic'
$query = "SELECT item FROM info WHERE cat = '".mysql_real_escape_string($topic)."'";
$result = mysql_query($query);
#
if($result) { #make sure the query was successful
$items = array();
#
while($row = mysql_fetch_array($result)) {
$items[] = $row['item']; #push all of the results into an array
}
#
$string = implode(',',$items); #implode the results separated by commas
echo $string; #here we echo the string to the browser; this is what the javascript will be receiving
}
?>
index.hmtl
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AJAX/PHP Combination Dropdown Menus</title>
<script type="text/javascript" src="combo.js"></script>
</head><body>
<form action="index.html" method="post">
<table cellpadding="15px">
<tr>
<td>Topic:</td>
<td>
<select id="topic" onChange="clicked();" style="width: 200px;">
<option>Please Select</option>
<option value='fruit'>Fruits</option>
<option value='vegetable'>Vegetables</option>
<option value='meat'>Meats</option>
</select>
</td>
</tr><tr>
<td>Generated:</td>
<td>
<select id="subcats" disabled="disabled" style="width: 200px;">
<option>Select Topic First</option>
</select>
</td>
</tr>
<tr>
<td>Generated:</td>
<td>
<select id="subcats2" disabled="disabled" style="width: 200px;">
<option>Select Topic First</option>
</select>
</td>
</tr>
</table>
</form>
</body></html>
Is there he need for a javascript?
