Nah, yang benar-benar Anda butuhkan adalah panggilan AJAX yang memungkinkan Anda berkomunikasi dengan server tanpa memuat ulang halaman. Yang harus Anda lakukan pada dasarnya adalah mengirim permintaan HTTP baru dengan parameter negara untuk mendapatkan daftar kota di dalamnya. Cara yang benar adalah mengirim (respons HTTP) hanya data (kota) dalam format JSON atau serupa, dan bukan presentasinya juga (html), tetapi untuk kesederhanaan, Anda dapat terus bekerja seperti yang Anda mulai (kembalikan data dengan html) .
Mulailah dengan memisahkan kode yang menghasilkan HTML selectBoxOptions kota di skrip lain. Anda akan menggunakan skrip itu untuk mendapatkan daftar kota di negara tertentu dengan menggunakan AJAX (XMLHttpRequest library).
Lihat ini, ini adalah solusi yang berfungsi untuk masalah Anda. Permintaan HTTP dikirim setiap kali pengguna mengubah opsi countrySelectBox, dengan cara itu kotak pilih kota Anda diperbarui setiap kali diperlukan. Yang harus Anda lakukan adalah mengubah url di atribut onchange yang menunjuk ke skrip Anda (saya sebelumnya mengatakan bahwa Anda harus pindah Blok kode ke-2 menjadi skrip terpisah).
<!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 asli (hanya javascript murni/vanila yang digunakan. Tidak ada pustaka lain yang digunakan) fungsi javascript yang memungkinkan Anda mengirim permintaan HTTP tanpa memuat ulang halaman. Saya melihat Anda menggunakan jQuery, yang menyembunyikan kompleksitas fungsi ini, sama seperti form->submit, tetapi saya menyarankan Anda untuk mempelajari cara kerja httpGetAsync, karena menggunakan jQuery untuk tugas sederhana seperti itu berlebihan.
Anda tidak memerlukan fungsi javascript ini
function getCity(countryId)
Sebaliknya, Anda harus meletakkan kode Anda yang berkomunikasi dengan database dalam file .php, bukan dalam javascript (ingat, javascript adalah sisi klien, dijalankan pada mesin klien, misalnya browser, sedangkan php dijalankan di server). SQL Anda tidak boleh ditulis dalam javascript. Kode sisi klien tidak dapat berkomunikasi dengan database secara langsung, hanya melalui pengkodean sisi server. Untuk mencapai itu, Anda harus mengembalikan nilai skrip PHP getCities.php kembali ke klien (javascript) sebagai respons HTTP.
Saat Anda mengirim permintaan HTTP ke beberapa file .php, skrip itu dijalankan di server, dan semua yang Anda katakan "echo" atau "print", di akhir skrip, secara otomatis dikirim sebagai respons HTTP. Anda sebenarnya tidak perlu menulis kode apa pun untuk mengirim respons HTTP. Itu dilakukan secara otomatis. Anda hanya perlu menggemakan/mencetak apa pun yang Anda butuhkan di sisi klien. Dalam kasus Anda, Anda perlu mencetak opsi untuk negara tertentu.
Bagaimana skrip mengetahui negara mana yang diperlukan untuk memilih kota dari database? Nah, Anda mengirim permintaan HTTP dengan parameter "negara". Itulah yang dilakukan Formulir Anda secara otomatis saat Anda mengirimkannya. Semua tag HTML yang ada di dalam Formulir, dan memiliki set atribut nama, akan dikirim dalam permintaan HTTP sebagai parameter. Tetapi, karena Anda tidak dapat menggunakan submit, Anda harus melakukan ini secara manual.
Untuk mengirim parameter di dalam permintaan HTTP GET sangat sederhana. Lihat url berikut:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
Di sisi server, variabel berikut akan diisi:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
Untuk mempelajari lebih lanjut tentang cara kerja GET dan POST, dan apa perbedaannya, lihat ini
Mulailah dengan membuat file getCities.php, dan salin tempel kode yang berkomunikasi dengan database dan menghasilkan opsi kota. Ini pada dasarnya apa yang sudah Anda lakukan, Anda hanya perlu meletakkan kode itu di file .php terpisah. Jadi, ketika klien (browser) meminta daftar kota di negara tertentu, Anda akan mengirim permintaan HTTP (menggunakan fungsi httpGetAsync()) untuk mendapatkan daftar tersebut dari server.
Di index.php Anda salin tempel skrip ini
<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>
Selanjutnya, letakkan atribut onchange pada kotak pilih, ingat, itu semua huruf kecil, bukan onChange.
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
Untuk pertanyaan apa pun, tanyakan saja... :)
