get input values from other input - php

Question

im having a little problem, i have a form, with three fields, my problem is this one:
on the 2 and 3 input i get via javascript values for countries and cities, what i want to do is to make the city input throw the values from the country i have selected in the country input, heres the javascript
<script>
var availableTags = [
<?php
$sql = "select * from citys ";
$rsd = mysql_query($sql);
while($row = mysql_fetch_array($rsd))
{
$pid=$row['cid'];
$city=$row['city'];
$state=$row['state'];
?>
"<?php echo $city; ?>,<?php echo $state; ?>",
<?php } ?>
];
$( "#inputsearch21" ).autocomplete({
source: function( request, response ) {
var matches = $.map( availableTags, function(tag) {
if ( tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return tag;
}
});
response(matches);
}
});
</script>
and the country script is the same, changing the php for country database.
i know i have to get the country id from the first form and in the second query i should be "select * from citys where countryid="$countryid"
any idea how to do this?

Answer 1

Probably the best thing to do is to work with an cobmination ajax and json. Then It should be something like this.
getCities.php
<?php
/* your connection ofc. */
$con = database_connection();
/* example unsecure please use PDO */
$sql = "SELECT ID, Name FROM City WHERE Country = '" . $_GET['country'] . "'";
$rsd = mysql_query($sql);
$res = mysql_fetch_array($rsd);
/* Return output in json format */
echo json_encode($res);
?>
Javascript
$.ajax({
type: "GET",
url: "getCities.php",
data: { country: "Germany" }
}).done(function( output ) {
/* Example for select inputs */
var cities = eval('(' + output + ')');
var length = cities.length;
for(var i = 0; i < length; i++)
{
var newOption = $('<option/>');
newOption.attr('text', cities[i].Text);
newOption.attr('value', cities[i].Value);
$('#ID-OF-SELECTBOX').append(newOption);
}
});