pspsully
02-13-2007, 11:38 AM
Hi Guys,
OK, i dont do a lot of work with javascript but for a site im currently doing i need to make new dropdows appear when something is selected from another. Like if i have a dropdown menu with all the countries in it, when some selects USA, another will appear with all the US states. This far i can get using AJAX. I got a template off the net and messed around until i got it to work the way i wanted.
My problem now is when people select a state, i want a 3rd dropdown to appear with all the cities from that state!! I have all the countries, states and towns in a MySQL database and as i said i can get the first 2 drop down menus to work but i cant get the 3rd.
Heres my code,
display.php
<?php
print "<LINK href=\"scripts/main.css\" type=\"text/css\" rel=\"stylesheet\">";
?>
<html>
<head>
<title>Home Stages</title>
<script type="text/javascript">
var url = "data.php?table="; // The server-side script
function handleHttpResponse() {
if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById('divCustomerInfo').innerHTML = results;
}
}
}
function requestCustomerInfo() {
var sId = document.getElementById("txtCustomerId").value;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>
<body>
<form name="form"><span class="header">
Development:</span><br>
<select name="txtCustomerId" onchange="requestCustomerInfo(this.value)" class="wideselectd">
<?php
require('lib/config.inc');
print "<option value=\"\">Select</option>";
$res = @mysql_query("SELECT * FROM developments ORDER BY development ASC");
WHILE ($row = @mysql_fetch_array($res) ){
print "<option value=\"$row[development]\">$row[development]</option>";
}
?>
</select>
</form>
<div id="divCustomerInfo"></div>
</body>
</html>
This is the page people view to get the the dropdown menu. Then i use this page to get the mysql result and display it on the 1st page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK href="scripts/main.css" type="text/css" rel="stylesheet">
<title>Get Customer Data</title>
</head>
<body>
<div id="divInfoToReturn" class="wideselectd">
<?php
print "
<form class=\"header\">
<select name=\"txtCustomerId2\" class=\"wideselectd\">";
print "<option value=\"\">Select Street Name:</option>";
require('lib/config.inc');
$res = @mysql_query("SELECT * FROM $table ORDER BY area ASC");
WHILE ($row = @mysql_fetch_array($res) ){
print "<option value=\"$row[area]\">$row[area]</option>";
}
print "</select></form>";
?>
</div>
</body>
</html>
This works fine and the second dropdown appears but i just cant get a 3rd one to work!! Can anyone help me out??
OK, i dont do a lot of work with javascript but for a site im currently doing i need to make new dropdows appear when something is selected from another. Like if i have a dropdown menu with all the countries in it, when some selects USA, another will appear with all the US states. This far i can get using AJAX. I got a template off the net and messed around until i got it to work the way i wanted.
My problem now is when people select a state, i want a 3rd dropdown to appear with all the cities from that state!! I have all the countries, states and towns in a MySQL database and as i said i can get the first 2 drop down menus to work but i cant get the 3rd.
Heres my code,
display.php
<?php
print "<LINK href=\"scripts/main.css\" type=\"text/css\" rel=\"stylesheet\">";
?>
<html>
<head>
<title>Home Stages</title>
<script type="text/javascript">
var url = "data.php?table="; // The server-side script
function handleHttpResponse() {
if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById('divCustomerInfo').innerHTML = results;
}
}
}
function requestCustomerInfo() {
var sId = document.getElementById("txtCustomerId").value;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>
<body>
<form name="form"><span class="header">
Development:</span><br>
<select name="txtCustomerId" onchange="requestCustomerInfo(this.value)" class="wideselectd">
<?php
require('lib/config.inc');
print "<option value=\"\">Select</option>";
$res = @mysql_query("SELECT * FROM developments ORDER BY development ASC");
WHILE ($row = @mysql_fetch_array($res) ){
print "<option value=\"$row[development]\">$row[development]</option>";
}
?>
</select>
</form>
<div id="divCustomerInfo"></div>
</body>
</html>
This is the page people view to get the the dropdown menu. Then i use this page to get the mysql result and display it on the 1st page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<LINK href="scripts/main.css" type="text/css" rel="stylesheet">
<title>Get Customer Data</title>
</head>
<body>
<div id="divInfoToReturn" class="wideselectd">
<?php
print "
<form class=\"header\">
<select name=\"txtCustomerId2\" class=\"wideselectd\">";
print "<option value=\"\">Select Street Name:</option>";
require('lib/config.inc');
$res = @mysql_query("SELECT * FROM $table ORDER BY area ASC");
WHILE ($row = @mysql_fetch_array($res) ){
print "<option value=\"$row[area]\">$row[area]</option>";
}
print "</select></form>";
?>
</div>
</body>
</html>
This works fine and the second dropdown appears but i just cant get a 3rd one to work!! Can anyone help me out??