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>
Try this:
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
should be:
<select name="state" onchange="getCity('<?php echo $country?>',this.value)">
on your page here if I inspect it while playing with the dropdowns I get a javascript error about USA not being defined, this is because you are echoing $country out to the page as javascript, and so it's trying to evaluate USA as a variable, and not a string. This breaks the javascript so the rest of the actions don't take place.
I manually went to the URL for findCity.php with the query parameters and that's working, so I suspect that once you fix your javascript errors you'll be off to the races if nothing else is wrong.
As in my comment, I highly suggest you use mysql_real_escape if you insist on using mysql_* flavor functions, though most people on SO would tell you to use PDO or something similar as of PHP 5.5 > the mysql_* functions are considered mostly deprecated