Welnu, wat je echt nodig hebt, is een AJAX-oproep waarmee je met de server kunt communiceren zonder een pagina opnieuw te laden. Het enige dat u hoeft te doen, is in feite een nieuw HTTP-verzoek verzenden met een landparameter om de lijst met steden erin te krijgen. De juiste manier zou zijn om (HTTP-antwoord) alleen de gegevens (steden) in JSON of vergelijkbaar formaat te verzenden, en niet ook de presentatie ervan (html), maar voor de eenvoud kunt u blijven werken zoals u begon (gegevens retourneren met html) .
Begin met het scheiden van de code die HTML selectBoxOptions van steden genereert in een ander script. U zult dat script gebruiken om de lijst met steden in een bepaald land te krijgen met behulp van AJAX (XMLHttpRequest-bibliotheek).
Kijk hier eens naar, het is een werkende oplossing voor je probleem. HTTP-verzoek wordt verzonden wanneer de gebruiker de countrySelectBox-optie wijzigt, op die manier wordt uw stedenselectievak elke keer dat het nodig is bijgewerkt. Het enige wat u hoeft te doen is de url in het onchange-attribuut te wijzigen dat naar uw script verwijst (ik heb eerder gezegd dat u 2e blok code in apart script).
<!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>");
}
?>
BEWERKEN:
httpGetAsync is native (alleen pure/vanilla javascript wordt gebruikt. Er worden geen andere bibliotheken gebruikt) javascript-functie waarmee u HTTP-verzoeken kunt verzenden zonder een pagina opnieuw te laden. Ik zie dat je jQuery gebruikt, wat de complexiteit van deze functie verbergt, hetzelfde als form->submit, maar ik raad je aan om te leren hoe httpGetAsync werkt, omdat het gebruik van een jQuery voor zo'n eenvoudige taak overdreven is.
Je hebt deze javascript-functie niet nodig
function getCity(countryId)
In plaats daarvan moet u uw code die communiceert met de database in een .php-bestand plaatsen, niet in javascript (onthoud dat javascript een clientzijde is, het wordt uitgevoerd op de clientcomputer, bijvoorbeeld de browser, terwijl php op de server wordt uitgevoerd). Uw SQL mag nooit in javascript worden geschreven. Client-side code kan niet rechtstreeks communiceren met een database, alleen via server-side codering. Om dat te bereiken, moet u een waarde van het PHP-script getCities.php terugsturen naar de client (javascript) als een HTTP-antwoord.
Wanneer u een HTTP-verzoek naar een .php-bestand stuurt, wordt dat script uitgevoerd op een server, en alles wat u zei "echo" of "afdrukken", aan het einde van het script, wordt automatisch verzonden als HTTP-antwoord. U hoeft eigenlijk geen code te schrijven om een HTTP-antwoord te verzenden. Het wordt automatisch gedaan. Je hoeft alleen maar te herhalen/printen wat je nodig hebt aan de clientzijde. In uw geval moet u opties voor een bepaald land afdrukken.
Hoe weet het script voor welk land het steden uit de database moet selecteren? Welnu, u verzendt een HTTP-verzoek met een parameter "land". Dat is wat je Form automatisch doet als je het indient. Alle HTML-tags die zich in Form bevinden en een naamkenmerk hebben, worden als parameters in HTTP-verzoek verzonden. Maar aangezien u geen submit kunt gebruiken, moet u dit handmatig doen.
Het verzenden van een parameter binnen het HTTP GET-verzoek is heel eenvoudig. Bekijk de volgende url:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
Aan de serverzijde worden de volgende variabelen ingevuld:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
Voor meer informatie over hoe GET en POST werken en wat het verschil is, ga je naar dit
Ga aan de slag door een getCities.php-bestand te maken en kopieer en plak de code die communiceert met de database en stadsopties genereert. Het is eigenlijk wat je al hebt gedaan, je hoeft alleen die code in een apart .php-bestand te plaatsen. Dus wanneer een client (browser) om een lijst met steden in een bepaald land vraagt, verzendt u een HTTP-verzoek (met de functie httpGetAsync()) om die lijst van de server te krijgen.
Kopieer dit script in uw index.php
<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>
Zet vervolgens onchange attribuut op select box, onthoud, het is allemaal in kleine letters, niet onChange.
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
Voor elke vraag gewoon stellen... :)