[SOLVED] Dynamic Dropdown with AJAX

timmah1 · March 27, 2009

This is probably the wrong forum to post in, but this is the most helpful, so here goes.

I have a database with all US Cities, associated with the states.

id state_id city

I have a drop-down with all the states with their ID

<select id="state" onChange="clicked();" style="width: 200px;"> 
         		 <option selected>Please Select</option>
         		 <option value="1">Alabama</option> 
	         <option value="2">Alaska</option> 
	         <option value="3">Arizona</option> 
	         <option value="4">Arkansas</option> 
	         <option value="5">California</option> 
	         <option value="6">Colorado</option> 
	         <option value="7">Connecticut</option> 
	         <option value="8">Delaware</option> 
	         <option value="9">Florida</option> 
	         <option value="10">Georgia</option> 
	         <option value="11">Hawaii</option> 
	         <option value="12">Idaho</option> 
	         <option value="13">Illinois</option> 
	         <option value="14">Indiana</option> 
	         <option value="15">Iowa</option> 
	         <option value="16">Kansas</option> 
	         <option value="17">Kentucky</option> 
	         <option value="18">Louisiana</option> 
	         <option value="19">Maine</option> 
	         <option value="20">Maryland</option> 
	         <option value="21">Massachusetts</option> 
	         <option value="22">Michigan</option> 
	         <option value="23">Minnesota</option> 
	         <option value="24">Mississippi</option> 
	         <option value="25">Missouri</option> 
	         <option value="26">Montana</option> 
	         <option value="27">Nebraska</option> 
	         <option value="28">Nevada</option> 
	         <option value="29">New Hampshire</option> 
	         <option value="30">New Jersey</option> 
	         <option value="31">New Mexico</option> 
	         <option value="32">New York</option> 
	         <option value="33">North Carolina</option> 
	         <option value="34">North Dakota</option> 
	         <option value="35">Ohio</option> 
	         <option value="36">Oklahoma</option> 
	         <option value="37">Oregon</option> 
	         <option value="38">Pennsylvania</option> 
	         <option value="39">Rhode Island</option> 
	         <option value="40">South Carolina</option> 
	         <option value="41">South Dakota</option> 
	         <option value="42">Tennessee</option> 
	         <option value="43">Texas</option> 
	         <option value="44">Utah</option> 
	         <option value="45">Vermont</option> 
	         <option value="46">Virginia</option> 
	         <option value="47">Washington</option> 
	         <option value="48">Washington D.C.</option> 
	         <option value="49">West Virginia</option> 
	         <option value="50">Wisconsin</option> 
	         <option value="51">Wyoming</option> 

      </select>

When a state is clicked, I want it to populate the City dropdown, but it is not working, the City dropdown is blank.

Can anybody look at the code and tell me what I'm doing wrong?

test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
   <title>testing</title> 


<script type="text/javascript" src="combo.js"></script> 


</head><body> 


<form action="test.php" method="post"> 
<table cellpadding="15px"> 
<tr> 
   <td>State:</td> 
   <td> 
      <select id="state" onChange="clicked();" style="width: 200px;"> 
         		 <option selected>Please Select</option>
         		 <option value="1">Alabama</option> 
	         <option value="2">Alaska</option> 
	         <option value="3">Arizona</option> 
	         <option value="4">Arkansas</option> 
	         <option value="5">California</option> 
	         <option value="6">Colorado</option> 
	         <option value="7">Connecticut</option> 
	         <option value="8">Delaware</option> 
	         <option value="9">Florida</option> 
	         <option value="10">Georgia</option> 
	         <option value="11">Hawaii</option> 
	         <option value="12">Idaho</option> 
	         <option value="13">Illinois</option> 
	         <option value="14">Indiana</option> 
	         <option value="15">Iowa</option> 
	         <option value="16">Kansas</option> 
	         <option value="17">Kentucky</option> 
	         <option value="18">Louisiana</option> 
	         <option value="19">Maine</option> 
	         <option value="20">Maryland</option> 
	         <option value="21">Massachusetts</option> 
	         <option value="22">Michigan</option> 
	         <option value="23">Minnesota</option> 
	         <option value="24">Mississippi</option> 
	         <option value="25">Missouri</option> 
	         <option value="26">Montana</option> 
	         <option value="27">Nebraska</option> 
	         <option value="28">Nevada</option> 
	         <option value="29">New Hampshire</option> 
	         <option value="30">New Jersey</option> 
	         <option value="31">New Mexico</option> 
	         <option value="32">New York</option> 
	         <option value="33">North Carolina</option> 
	         <option value="34">North Dakota</option> 
	         <option value="35">Ohio</option> 
	         <option value="36">Oklahoma</option> 
	         <option value="37">Oregon</option> 
	         <option value="38">Pennsylvania</option> 
	         <option value="39">Rhode Island</option> 
	         <option value="40">South Carolina</option> 
	         <option value="41">South Dakota</option> 
	         <option value="42">Tennessee</option> 
	         <option value="43">Texas</option> 
	         <option value="44">Utah</option> 
	         <option value="45">Vermont</option> 
	         <option value="46">Virginia</option> 
	         <option value="47">Washington</option> 
	         <option value="48">Washington D.C.</option> 
	         <option value="49">West Virginia</option> 
	         <option value="50">Wisconsin</option> 
	         <option value="51">Wyoming</option> 

      </select> 
   </td> 
</tr><tr> 
   <td>City:</td> 
   <td> 
      <select id="city" disabled="disabled" style="width: 200px;"> 
         <option>Select State First</option> 
      </select> 
   </td> 
</tr> 
</table> 
</form> 
</body></html>

fetch.php

<?php 
if(empty($_GET['state'])) { # if url query is left empty, do nothing but terminate the script 
   exit(); 
} 
$topic = $_GET['state']; 
$link = mysql_connect("localhost","xx","xx"); 
mysql_select_db("xx"); 
# 
#select records based on 'topic' 
$query = "SELECT id, city FROM cities WHERE state_id = '".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['city']; #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 
} 
?>

combo.js

//globals 
var first = "state"; //id of first SELECT 
var second = "city"; //id of second 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); 
      El.appendChild(childEl); //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 selected = el.selectedIndex; 
// 
while(ob2.hasChildNodes()) { //removes items from dropdown if some already exist 
   ob2.removeChild(ob2.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 State First'; 
   ob2.disabled=1; 
} 
}

Thanks in advance

MadTechie · March 27, 2009

The logic looks okay.. (I know it seams like i'm passing the buck but it seams like a JS problem)

try opening fetch.php via the browser with the state and check the output..

fetch.php?state=1

fetch.php?state=2

fetch.php?state=3

assuming thats okay it would be a JS problem try adding an alert (see below)

function onReadystate() {
//
var ready=req.readystate;
var data=null;
if(ready==4){ //check ready state
alert('I GOT HERE');//<--------------HERE
   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);
      El.appendChild(childEl); //then append it to the second dropdown list
      childEl.value = items[i];
      childEl.innerHTML = items[i];
   }
}
}

If after selecting a option from the first box you get the alert then the problem would be the JS directly below it (i assume its in that part)

Also try it on another Browser

Hope that helps

sniperscope · March 27, 2009

why dont you use javascript which is painless.

timmah1 · March 27, 2009

sniperscope,

I'm not well versed in javascript, so that's why I don't do it in javascript.

MadTechie,

I tried your sample, and got nothing, then I put an alert on the bottom

function clicked() { 
// 
var el = document.getElementById(first); 
var ob2 = document.getElementById(second); 
var selected = el.selectedIndex; 
// 
while(ob2.hasChildNodes()) { //removes items from dropdown if some already exist 
   ob2.removeChild(ob2.firstChild); 
} 
if(selected!= 0) { //if they choose something other than the first select-->"Select topic first" 
alert('I GOT HERE1');//<--------------HERE
   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 State First'; 
   ob2.disabled=1; 
} 
}

And I received that alert.

I also did this before posting

fetch.php?state=1

fetch.php?state=2

fetch.php?state=3

to make sure something was being grabbed, and it shows everything correctly, so to be honest, I have no idea

why this isn't working

MadTechie · March 27, 2009

did you put the alert in the place i said as your post has the alert in a different place!

if(selected!= 0) { //if they choose something other than the first select-->"Select topic first"
alert('I GOT HERE1');//<--------------HERE

if(ready==4){ //check ready state
alert('I GOT HERE');//<--------------HERE

timmah1 · March 27, 2009

Yes, I put it there, but I got nothing

timmah1 · March 27, 2009

You can see here if you'd like

http://cheezyfries.net/going/test.php

MadTechie · March 27, 2009

Humm doesn't work for me

http://cheezyfries.net/going/fetch.php?topic=5

returns nothing!

However i also noticed that

function onReadystate() {
//
var ready=req.readystate;

should be

function onReadystate() {
//
var ready=req.readyState;

note the capital S "readyState"

timmah1 · March 27, 2009

Great!

I now get the Alert, but still no results for the city

MadTechie · March 27, 2009

found it

 sendRequest('fetch.php?topic='+el.options[selected].value);

should be

 sendRequest('fetch.php?state='+el.options[selected].value);

timmah1 · March 27, 2009

oh man, how could I oversee that???

Thank you so much MadTechie, works perfect now

Sign In

[SOLVED] Dynamic Dropdown with AJAX

Recommended Posts

timmah1

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

sniperscope

Link to comment

Share on other sites

timmah1

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

timmah1

Link to comment

Share on other sites

timmah1

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

timmah1

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

timmah1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information