Bueno, lo que realmente necesita es una llamada AJAX que le permita comunicarse con el servidor sin recargar una página. Básicamente, todo lo que tiene que hacer es enviar una nueva solicitud HTTP con un parámetro de país para obtener la lista de ciudades. La forma correcta sería enviar (respuesta HTTP) solo los datos (ciudades) en formato JSON o similar, y no su presentación también (html), pero para simplificar, puede continuar trabajando como comenzó (devolver datos con html) .
Comience separando el código que genera HTML selectBoxOptions de ciudades en otro script. Usará ese script para obtener la lista de ciudades en un país en particular usando AJAX (biblioteca XMLHttpRequest).
Eche un vistazo a esto, es una solución funcional a su problema. La solicitud HTTP se envía cada vez que el usuario cambia la opción countrySelectBox, de esa manera su cuadro de selección de ciudades se actualiza cada vez que lo necesita. Todo lo que tiene que hacer es cambiar la URL en el atributo onchange que apunta a su script (anteriormente dije que debe mover segundo bloque de código en un 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 es una función javascript nativa (solo se usa javascript puro/vainilla. No se usan otras bibliotecas) que le permite enviar una solicitud HTTP sin recargar una página. Veo que está usando jQuery, que oculta la complejidad de esta función, igual que formulario->enviar, pero le recomiendo que aprenda cómo funciona httpGetAsync, porque usar jQuery para una tarea tan simple es excesivo.
No necesitas esta función javascript
function getCity(countryId)
En su lugar, debe poner su código que se comunica con la base de datos en un archivo .php, no en javascript (recuerde, javascript es del lado del cliente, se ejecuta en la máquina del cliente, por ejemplo, el navegador, mientras que php se ejecuta en el servidor). Su SQL nunca debe escribirse en javascript. El código del lado del cliente no puede comunicarse con una base de datos directamente, solo a través de la codificación del lado del servidor. Para lograrlo, debe devolver un valor del script PHP getCities.php al cliente (javascript) como respuesta HTTP.
Cuando envía una solicitud HTTP a algún archivo .php, ese script se ejecuta en un servidor, y todo lo que dijo "eco" o "imprimir", al final del script, se envía automáticamente como respuesta HTTP. En realidad, no tiene que escribir ningún código para enviar una respuesta HTTP. Se hace automáticamente. Solo tiene que hacer eco/imprimir lo que necesite en el lado del cliente. En su caso, necesita imprimir opciones para un país en particular.
¿Cómo sabe el script para qué país necesita seleccionar ciudades de la base de datos? Bueno, envía una solicitud HTTP con un parámetro "país". Eso es lo que su Formulario está haciendo automáticamente cuando lo envía. Todas las etiquetas HTML que están dentro del formulario y tienen un atributo de nombre establecido se enviarán en una solicitud HTTP como parámetros. Pero, dado que no puede usar enviar, debe hacerlo manualmente.
Enviar un parámetro dentro de la solicitud HTTP GET es muy simple. Eche un vistazo a la siguiente url:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
En el lado del servidor, se completarán las siguientes variables:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
Para obtener más información sobre cómo funcionan GET y POST, y cuál es la diferencia, consulta esto
Comience creando un archivo getCities.php y copie y pegue el código que se comunica con la base de datos y genera opciones de ciudad. Es básicamente lo que ya hiciste, solo tienes que poner ese código en un archivo .php separado. Entonces, cuando un cliente (navegador) solicita una lista de ciudades en un país en particular, enviará una solicitud HTTP (usando la función httpGetAsync()) para obtener esa lista del servidor.
En su copia de index.php, pegue 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>
A continuación, coloque el atributo onchange en el cuadro de selección, recuerde, todo está en minúsculas, no onChange.
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
Para cualquier pregunta solo pregunte... :)
