To, co opravdu potřebujete, je volání AJAX, které vám umožní komunikovat se serverem bez opětovného načítání stránky. Stačí v podstatě odeslat nový HTTP požadavek s parametrem země, abyste získali seznam měst v něm. Správným způsobem by bylo posílat (odpověď HTTP) pouze data (města) ve formátu JSON nebo podobném formátu, a nikoli jejich prezentaci také (html), ale pro jednoduchost můžete pokračovat v práci tak, jak jste začali (vracet data pomocí html) .
Začněte oddělením kódu, který generuje HTML selectBoxOptions měst v jiném skriptu. Tento skript použijete k získání seznamu měst v konkrétní zemi pomocí AJAX (Knihovna XMLHttpRequest).
Podívejte se na toto, je to funkční řešení vašeho problému. Požadavek HTTP je odeslán vždy, když uživatel změní možnost countrySelectBox, takže pole pro výběr města se aktualizuje pokaždé, když to potřebuje. Jediné, co musíte udělat, je změnit adresu URL v atributu onchange, který ukazuje na váš skript (dříve jsem řekl, že byste se měli přesunout 2. blok kódu do samostatného skriptu).
<!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>");
}
?>
EDIT:
httpGetAsync je nativní (používá se pouze čistý/vanilla javascript. Nepoužívá se žádné jiné knihovny) javascriptová funkce, která umožňuje odeslat HTTP požadavek bez opětovného načítání stránky. Vidím, že používáte jQuery, které skrývá složitost této funkce, stejně jako form->submit, ale doporučuji vám, abyste se naučili, jak funguje httpGetAsync, protože použití jQuery pro tak jednoduchý úkol je přehnané.
Nepotřebujete tuto funkci javascript
function getCity(countryId)
Místo toho byste měli svůj kód, který komunikuje s databází, vložit do souboru .php, nikoli do javascriptu (pamatujte, že javascript je na straně klienta, spouští se na klientském počítači, např. prohlížeči, zatímco php se spouští na serveru). Vaše SQL by nikdy nemělo být napsáno v javascriptu. Kód na straně klienta nemůže komunikovat s databází přímo, pouze prostřednictvím kódování na straně serveru. Abyste toho dosáhli, musíte vrátit hodnotu PHP skriptu getCities.php zpět klientovi (javascript) jako odpověď HTTP.
Když odešlete HTTP požadavek na nějaký .php soubor, skripty se spustí na serveru a vše, co jste na konci skriptu řekli „echo“ nebo „tisk“, se automaticky odešle jako odpověď HTTP. K odeslání odpovědi HTTP ve skutečnosti nemusíte psát žádný kód. Provádí se automaticky. Na straně klienta prostě musíte echo/tisknout, co potřebujete. Ve vašem případě musíte vytisknout možnosti pro konkrétní zemi.
Jak skript ví, pro kterou zemi potřebuje vybrat města z databáze? No, odešlete HTTP požadavek s parametrem "země". To je to, co váš formulář dělá automaticky, když jej odešlete. Všechny HTML značky, které jsou uvnitř formuláře a mají nastaven atribut name, budou odeslány v požadavku HTTP jako parametry. Ale protože nemůžete použít odeslat, musíte to udělat ručně.
Odeslání parametru uvnitř požadavku HTTP GET je velmi jednoduché. Podívejte se na následující adresu URL:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
Na straně serveru budou naplněny následující proměnné:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
Chcete-li se dozvědět více o tom, jak GET a POST fungují a jaký je mezi nimi rozdíl, podívejte se toto
Začněte vytvořením souboru getCities.php a zkopírujte a vložte kód, který komunikuje s databází a generuje možnosti města. Je to v podstatě to, co jste již udělali, jen musíte tento kód vložit do samostatného souboru .php. Když tedy klient (prohlížeč) požádá o seznam měst v konkrétní zemi, odešlete požadavek HTTP (pomocí funkce httpGetAsync()), abyste tento seznam získali ze serveru.
Do svého index.php zkopírujte a vložte tento skript
<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>
Dále vložte atribut onchange na výběrové pole, nezapomeňte, že jsou všechna malá písmena, nikoli onChange.
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
V případě jakýchkoli dotazů se ptejte... :)