ajax drop down
Moderator: General Moderators
ajax drop down
please help me,script for ajax with select the country it shows the reponding state from datatbase.using ajax.using drop down. 
-
top10ingoogle
- Forum Newbie
- Posts: 3
- Joined: Sat May 30, 2009 8:12 am
Re: ajax drop down
I've done the same thing with a dealership website I've built. It's fairly simple after you figure out the code. You can import the country dropdown from a database into your select menu. Then based on the variable passed to your import file it would then pass the request to your database based on $_REQUEST[id]; and return the corresponding state into the select menu on the page. Check out the working version on http://bremertondodge.com/used-vehicles/inventory.php Select a make and the next select menu auto imports the matching models based the make request against the database!
So basically when the user selects a country that country is passed to pullstates.php and in
pullstates.php you query your states table based on the country using $_REQUEST[id] and return the data as a loop in pullstates.php for option values and it would auto import into the select menu for states.
Code: Select all
<select id="countries" onchange="javascript:importdrop(this.options[this.selectedIndex].value)" style="width:125px;font-family: Arial;font-size: 12px;cursor:pointer;padding:1px;">
<!-- this is where you would put your loop to import the countries from your database -->
<option value="United States" style="padding:1px;">United States</option>
.... all other option values for countries
</select>
<select id="states" style="width:125px;font-family: Arial;font-size: 12px;cursor:pointer;padding:1px;" disabled></select>
function importdrop(id) {
function myNewXMLobject() {
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}if (!xmlhttp){
alert('There was a problem creating the XMLHttpRequest object');
}
return xmlhttp;
}
// Make the XMLHttpRequest object
var http = myNewXMLobject();
document.getElementById("loading").innerHTML = '<center><img src="http://yoursite.com/images/loading.gif" border="0" style="margin-top:2px;"></center>';
// send data
function sendRequest() {
// Open PHP script for requests
var url = "http://yoursite.com/includes/pullstates.php?id="+id;
var myRandom = parseInt(Math.random()*999999); // cache buster
http.open('GET', url + '&rand=' + myRandom);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// Text returned FROM PHP script
var response = http.responseText;
if(response) {
document.getElementById("states").innerHTML = http.responseText;
}
}
}
sendRequest('importdrop('+id+');');
}
pullstates.php you query your states table based on the country using $_REQUEST[id] and return the data as a loop in pullstates.php for option values and it would auto import into the select menu for states.