This question already has an answer here:
I’m building a form with drop down boxes for country, state and city. I got the form to work, but didn’t like the way it stored the data, I want it to store the names of the country, city state, not ID numbers that reference each city, state, country. In this sample the top set of boxes are the new style, not working, and the bottom are the old.
http://heretomeet.com/ItineraryEntryPub.php
The form almost works, except the getCity() function expects a numeric variable, and won’t accept a string like “USA”.
The getCity() function is called by a change in the “state” drop-down box from findState.php. I have debugged the code far enough to know that “countryA” is causing me problems and not “state”, but can’t figure out why. I used the $test variable in findState.php to test this by replacing the with ? and when I did getCity() ran.
The main page:
$query = "SELECT country FROM country";
$result = mysql_query($query);
$query1 = "SELECT * FROM country";
$result1 = mysql_query($query1);
<script language="javascript" type="text/javascript">
function getXMLHTTP() {
//fuction to return the xml http object
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
}
catch(e) {
try {
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1) {
xmlhttp = false;
}
}
}
return xmlhttp;
}
function getState(countryId) {
var strURL = "findState.php?countryA=" + countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
document.getElementById('citydiv').innerHTML = '<select name="city">' + '<option>Func City</option>' + '</select>';
} else {
alert("Problem while using XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(countryId, stateId) {
var strURL = "findCity.php?countryA=" + countryId + "&state=" + stateId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("Problem while using XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
alert ("End Get City");
}
function getStateDest(countryId1) {
var strURL="findStateDest.php?country=" + countryId1;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statedivdest').innerHTML = req.responseText;
document.getElementById('citydivdest').innerHTML = '<select name="dest_city">' + '<option>Destination City</option>' + '</select>';
} else {
alert("Problem while using XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCityDest(countryId1,stateId1) {
var strURL = "findCityDest.php?country=" + countryId1 + "&state=" + stateId1;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydivdest').innerHTML = req.responseText;
} else {
alert("Problem while using XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
<script>
$(function() {
$( "#arrival" ).datepicker({ dateFormat: "yy-mm-dd" });
});
$(function() {
$( "#ret" ).datepicker({ dateFormat: "yy-mm-dd" });
});
</script>
</head>
<body>
<div class="container">
<div class="content">
<div id="schedform" style="position:relative; display:inline; width:440em; margin:auto; left:12.25em; top:3em; ">
<form method="post" action="" name="schedform" id="ajax-contact-form">
<center>
<h1> <font color="#FFFF33"/>Itinerary Entry<font color="#ffffff"/><font face="Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif"/> </h1>
<input class="textbox" type="text" name="username" placeholder="UserName" value="$user_name" />
<!--<input class="textbox" type="text" name="trav_type" value="" placeholder="Business or Pleasure?" />-->
<input type="radio" name="business" id="business" value="1"<?php if ($_POST['business'] == 'business') echo '1'; ?>/>Business
<input type="radio" name="pleasure" id="pleasure" value="1"<?php if ($_POST['pleasure'] == 'pleasure') echo '1'; ?>/>Pleasure</br>
</br>
<select name="country" onChange="getState(this.value)" style="display:inline;">
<option value="">Current Country</option>
<?php while ($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['country']?>><?php echo $row['country']?></option>
<?php } ?>
</select>
<div id="statediv" style="display:inline;">
<select name="state">
<option>Form State</option>
</select>
</div>
<div id="citydiv" style="display:inline;">
<select name="city">
<option>Form City</option>
</select>
</div>
<input class="textbox" style="display:inline;" type="text" id="arrival" name="arrival" value="" placeholder="Departing On" /></br>
<select name="dest_country" onChange="getStateDest(this.value)" style="display:inline;">
<option value="">Destination Country</option>
<?php while ($row=mysql_fetch_array($result1)) { ?>
<option value=<?php echo $row['id']?>><?php echo $row['country']?></option>
<?php } ?>
</select>
<div id="statedivdest" style="display:inline;">
<select name="dest_state"; >
<option>Destination State</option>
</select>
</div>
<div id="citydivdest" style="display:inline;">
<select name="dest_city";>
<option>Destination City</option>
</select>
</div>
<input class="textbox" style="display:inline; type="text" id="ret" name="ret" value="" placeholder="Returning On" /><br />
<textarea class="textbox2" name="details" rows="3" cols="25" placeholder="Anything Else You Want to Add..."></textarea><br />
<input class="button" type="submit" value="Done" />
</center>
</form>
</div>
<!-- End Div Vista --></div>
findCity.php:
<?php
$countryId = $_GET['countryA'];
$stateId = $_GET['state'];
$con = mysql_connect("blah,blah");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('heretome_oxwa665');
$query="SELECT city FROM city WHERE cont='$countryId' AND st='$stateId'";
$result=mysql_query($query);
?>
<select name="city">
<option>PHP City</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['city']?>><?php echo $row['city']?></option>
<?php } ?>
</select>
findState.php:
<?php
$country = $_GET['countryA'];
$test = 9999;
$con = mysql_connect("blah,blah");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('heretome_oxwa665');
$query="SELECT statename FROM states WHERE cont='$country'";
$result=mysql_query($query);
?>
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
<option>PHP State</option>
<?php while ($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['statename']?>><?php echo $row['statename']?></option>
<?php } ?>
</select>
</div>
