Bem, o que você realmente precisa é de uma chamada AJAX, que permite que você se comunique com o servidor sem recarregar uma página. Tudo o que você precisa fazer é basicamente enviar uma nova solicitação HTTP com um parâmetro country para obter a lista de cidades nele. A forma correta seria enviar (resposta HTTP) apenas os dados(cidades) em JSON ou formato similar, e não sua apresentação também (html), mas para simplificar, você pode continuar trabalhando como começou (retornar dados com html) .
Comece separando o código que gera HTML selectBoxOptions de cidades em outro script. Você usará esse script para obter a lista de cidades em determinado país usando AJAX (biblioteca XMLHttpRequest).
Dê uma olhada nisso, é uma solução de trabalho para o seu problema. A solicitação HTTP é enviada sempre que o usuário altera a opção countrySelectBox, dessa forma sua caixa de seleção de cidades é atualizada toda vez que precisar. Tudo o que você precisa fazer é alterar a url no atributo onchange que aponta para o seu script 2º bloco de código em script separado).
<!DOCTYPE html>
<html>
<head>
<script>
function populateCities(citiesSelectBoxOptions){
document.getElementById("city").innerHTML = citiesSelectBoxOptions;
}
function httpGetAsync(theUrl, callback)
{
alert(theUrl);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
</script>
</head>
<body>
<select name="country" id="country" onchange="httpGetAsync('www.yourdomain.com/getCities.php?country=' + this.options[this.selectedIndex].value, populateCities)">
<option value="Country1">Country 1</option>
<option value="Country2">Country 2</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
getCities.php
<?php
$db = pg_connect("$db_host $db_name $db_username $db_password");
$selectedCountry = $_GET['country'];
$query = "SELECT city FROM cities where country = ' $selectedCountry '";
$result = pg_query($query);
if (!$result) {
echo "Problem with query " . $query . "<br/>";
echo pg_last_error();
exit();
}
printf ("<option value='Select'>Select a City</option>");
while($myrow = pg_fetch_assoc($result)) {
printf ("<option value='$myrow[city]'>$myrow[city]</option>");
}
?>
EDITAR:
httpGetAsync é nativo (apenas javascript puro/baunilha é usado. Nenhuma outra biblioteca é usada) função javascript que permite enviar solicitações HTTP sem recarregar uma página. Vejo que você está usando jQuery, que esconde a complexidade dessa função, assim como form->submit, mas recomendo que você aprenda como funciona o httpGetAsync, pois usar um jQuery para uma tarefa tão simples é um exagero.
Você não precisa desta função javascript
function getCity(countryId)
Em vez disso, você deve colocar seu código que se comunica com o banco de dados em um arquivo .php, não em javascript (lembre-se, javascript é um lado do cliente, ele é executado na máquina do cliente, por exemplo, no navegador, enquanto o php é executado no servidor). Seu SQL nunca deve ser escrito em javascript. O código do lado do cliente não pode se comunicar diretamente com um banco de dados, apenas por meio da codificação do lado do servidor. Para fazer isso, você deve retornar um valor do script PHP getCities.php de volta ao cliente (javascript) como uma resposta HTTP.
Quando você envia uma requisição HTTP para algum arquivo .php, esses scripts são executados em um servidor, e tudo o que você disse "echo" ou "print", no final do script, é automaticamente enviado como resposta HTTP. Na verdade, você não precisa escrever nenhum código para enviar uma resposta HTTP. É feito automaticamente. Você só precisa ecoar/imprimir o que precisar no lado do cliente. No seu caso, você precisa imprimir as opções para um determinado país.
Como o script sabe para qual país ele precisa selecionar cidades do banco de dados? Bem, você envia requisição HTTP com um parâmetro "país". Isso é o que seu Formulário está fazendo automaticamente quando você o envia. Todas as tags HTML que estão dentro do Form, e possuem um atributo name definido, serão enviadas na requisição HTTP como parâmetros. Mas, como você não pode usar submit, você deve fazer isso manualmente.
Para enviar um parâmetro dentro de uma requisição HTTP GET é muito simples. Dê uma olhada na seguinte url:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
No lado do servidor, as seguintes variáveis serão preenchidas:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
Para saber mais sobre como GET e POST funcionam e qual é a diferença, consulte este
Comece criando um arquivo getCities.php e copie e cole o código que se comunica com o banco de dados e gera opções de cidade. É basicamente o que você já fez, basta colocar esse código em um arquivo .php separado. Assim, quando um cliente (navegador) solicita uma lista de cidades em determinado país, você enviará uma solicitação HTTP (usando a função httpGetAsync()) para obter essa lista do servidor.
Em seu index.php copie e cole este script
<script>
function populateCities(citiesSelectBoxOptions){
document.getElementById("city").innerHTML = citiesSelectBoxOptions;
}
function httpGetAsync(theUrl, callback)
{
alert(theUrl);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
</script>
Em seguida, coloque o atributo onchange na caixa de seleção, lembre-se, é tudo minúsculo, não onChange.
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
Qualquer dúvida é só perguntar... :)
