ठीक है, आपको वास्तव में AJAX कॉल की आवश्यकता है जो आपको पृष्ठ को पुनः लोड किए बिना सर्वर से संवाद करने की अनुमति देता है। आपको बस इतना करना है कि इसमें शहरों की सूची प्राप्त करने के लिए मूल रूप से एक देश पैरामीटर के साथ एक नया HTTP अनुरोध भेजें। सही तरीका यह होगा कि JSON या इसी तरह के प्रारूप में केवल डेटा (शहर) भेजें (HTTP प्रतिक्रिया), और इसकी प्रस्तुति भी (html) नहीं है, लेकिन सादगी के लिए, आप काम करना जारी रख सकते हैं जैसे आपने शुरू किया था (एचटीएमएल के साथ डेटा लौटाएं) ।
कोड को अलग करके प्रारंभ करें जो किसी अन्य स्क्रिप्ट में शहरों के HTML selectBoxOptions उत्पन्न करता है। आप AJAX (XMLHttpRequest लाइब्रेरी) का उपयोग करके विशेष देश में शहरों की सूची प्राप्त करने के लिए उस स्क्रिप्ट का उपयोग करेंगे।
इसे देखें, यह आपकी समस्या का एक कार्यशील समाधान है। जब भी उपयोगकर्ता देश चयन बॉक्स विकल्प बदलता है तो HTTP अनुरोध भेजा जाता है, इस तरह आपके शहरों का चयन बॉक्स हर बार अपडेट हो जाता है। आपको बस इतना करना है कि आपकी स्क्रिप्ट को इंगित करने वाली विनिमय विशेषता में यूआरएल बदलें (मैंने पहले कहा था कि आपको स्थानांतरित करना चाहिए कोड का दूसरा ब्लॉक अलग स्क्रिप्ट में)।
<!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>");
}
?>
संपादित करें:
httpGetAsync मूल है (केवल शुद्ध/वेनिला जावास्क्रिप्ट का उपयोग किया जाता है। किसी अन्य पुस्तकालय का उपयोग नहीं किया जाता है) जावास्क्रिप्ट फ़ंक्शन जो आपको पृष्ठ को पुनः लोड किए बिना HTTP अनुरोध भेजने में सक्षम बनाता है। मैं देख रहा हूं कि आप jQuery का उपयोग कर रहे हैं, जो इस फ़ंक्शन की जटिलता को छुपाता है, जैसे कि फॉर्म-> सबमिट करें, लेकिन मैं आपको यह सीखने की सलाह देता हूं कि httpGetAsync कैसे काम करता है, क्योंकि इस तरह के एक साधारण कार्य के लिए jQuery का उपयोग करना अधिक है।
आपको इस जावास्क्रिप्ट फ़ंक्शन की आवश्यकता नहीं है
function getCity(countryId)
इसके बजाय, आपको अपना कोड डालना चाहिए जो डेटाबेस के साथ एक .php फ़ाइल में संचार करता है, जावास्क्रिप्ट में नहीं (याद रखें, जावास्क्रिप्ट एक क्लाइंट साइड है, यह क्लाइंट मशीन पर निष्पादित होता है, जैसे ब्राउज़र, जबकि PHP सर्वर पर निष्पादित होता है)। आपका एसक्यूएल जावास्क्रिप्ट में कभी नहीं लिखा जाना चाहिए। क्लाइंट साइड कोड केवल सर्वर साइड कोडिंग के माध्यम से सीधे डेटाबेस से संचार नहीं कर सकता है। इसे पूरा करने के लिए, आपको PHP स्क्रिप्ट getCities.php का मान क्लाइंट (जावास्क्रिप्ट) को HTTP प्रतिक्रिया के रूप में वापस करना होगा।
जब आप किसी .php फ़ाइल के लिए HTTP अनुरोध भेजते हैं, तो वह स्क्रिप्ट सर्वर पर निष्पादित होती है, और स्क्रिप्ट के अंत में जो कुछ भी आपने "इको" या "प्रिंट" कहा है, वह स्वचालित रूप से HTTP प्रतिक्रिया के रूप में भेजा जाता है। HTTP प्रतिक्रिया भेजने के लिए आपको वास्तव में कोई कोड लिखने की आवश्यकता नहीं है। यह स्वचालित रूप से किया गया है। क्लाइंट साइड पर आपको जो कुछ भी चाहिए उसे आपको केवल गूंज/प्रिंट करना होगा। आपके मामले में, आपको विशेष देश के लिए विकल्प प्रिंट करने की आवश्यकता है।
स्क्रिप्ट कैसे जानती है कि किस देश के लिए उसे डेटाबेस से शहरों का चयन करना है? ठीक है, आप "देश" पैरामीटर के साथ HTTP अनुरोध भेजते हैं। जब आप इसे सबमिट करते हैं तो आप फॉर्म स्वचालित रूप से कर रहे हैं। सभी HTML टैग जो फ़ॉर्म के अंदर हैं, और एक नाम विशेषता सेट है, HTTP अनुरोध में पैरामीटर के रूप में भेजे जाने वाले हैं। लेकिन, चूंकि आप सबमिट का उपयोग नहीं कर सकते हैं, इसलिए आपको यह मैनुअल करना होगा।
HTTP GET अनुरोध के अंदर एक पैरामीटर भेजना बहुत आसान है। निम्नलिखित url पर एक नज़र डालें:
localhost/getCities?country=countryX&someOtherParam=something&myThirdParam=something3
सर्वर साइड पर, निम्नलिखित वेरिएबल को पॉप्युलेट किया जाएगा:
$_GET["country"] // value is 'countryX'
$_GET["someOtherParam"] // value is 'something'
$_GET["myThirdParam"] // value is 'something3'
GET और POST कैसे काम करता है, और क्या अंतर है, इस बारे में और जानने के लिए, यह
एक getCities.php फ़ाइल बनाकर आरंभ करें, और उस कोड को कॉपी पेस्ट करें जो डेटाबेस के साथ संचार करता है और शहर के विकल्प बनाता है। यह मूल रूप से वही है जो आपने पहले ही किया है, आपको बस उस कोड को अलग .php फ़ाइल में रखना होगा। इसलिए, जब कोई क्लाइंट (ब्राउज़र) विशेष देश के शहरों की सूची मांगता है, तो आप सर्वर से उस सूची को प्राप्त करने के लिए एक HTTP अनुरोध (httpGetAsync() फ़ंक्शन का उपयोग करके) भेजने जा रहे हैं।
अपने 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>
इसके बाद, ऑनचेंज एट्रिब्यूट को सेलेक्ट बॉक्स पर रखें, याद रखें, यह सब लोअर केस है, ऑन चेंज नहीं।
<select name="country" id="country" onchange="httpGetAsync('localhost/getCities?country=' + this.value, populateCities)">
किसी भी प्रश्न के लिए बस पूछें... :)
