JavaScript : AJAX for Province, Amphur, Tumbol
เริ่มจาก ได้ฐานข้อมูล จังหวัด -> อำเภอ -> ตำบล ที่ดีมาก มาจากไหน ตั้งแต่เมื่อไหร่ ไม่รู้ แต่พอจะใช้ขึ้นมา เพิ่งพบว่า ที่ได้มานั้นมันดีจริง ๆ ดียังไง ให้เปิด ตรวจสอบหมายเลขบัตรประจำตัวประชาชน ประกอบครับ (ที่จริงต้องเปิด http://th.wikipedia.org/wiki/เลขประจำตัวประชาชนไทย ด้วย)
มาดูฐานข้อมูลกันก่อน
1.จังหวัด
ตารางเป็นแบบนี้
ข้อมูลเป็นแบบนี้
สังเกตดูนะครับ id มันคือ หลักที่ 2+3 ของเลขบัตรประจำตัวประชาชน
2.อำเภอ
ตารางเป็นแบบนี้
ข้อมูลเป็นแบบนี้
id ของตารางนี้ ก็คือ หลักที่ 4+5 ของเลขบัตรประจำตัวประชาชน
3.ตำบล
ตารางเป็นแบบนี้
ข้อมูลเป็นแบบนี้
อันนี้ หลักที่ 6-10 ค่อนข้างกว้าง จึงระบุไม่ได้ แต่ได้ 2 อันแรกก็ดูดีแล้วน่ะ
AJAX กับ PHP ก็ต้องเริ่มจาก
1.เตรียมการสำหรับ form
";มาดูฐานข้อมูลกันก่อน
1.จังหวัด
ตารางเป็นแบบนี้
ข้อมูลเป็นแบบนี้
สังเกตดูนะครับ id มันคือ หลักที่ 2+3 ของเลขบัตรประจำตัวประชาชน
2.อำเภอ
ตารางเป็นแบบนี้
ข้อมูลเป็นแบบนี้
id ของตารางนี้ ก็คือ หลักที่ 4+5 ของเลขบัตรประจำตัวประชาชน
3.ตำบล
ตารางเป็นแบบนี้
ข้อมูลเป็นแบบนี้
อันนี้ หลักที่ 6-10 ค่อนข้างกว้าง จึงระบุไม่ได้ แต่ได้ 2 อันแรกก็ดูดีแล้วน่ะ
AJAX กับ PHP ก็ต้องเริ่มจาก
1.เตรียมการสำหรับ form
$ProvinceSelect.="$AmphurSelect="
";
$AmphurSelect.="
";$AmphurSelect.="
$TumbolSelect="
";
$TumbolSelect.="
";$TumbolSelect.="
$myDB->Query($SQL);
อันนี้คือ class ที่ผมทำเอาไว้แล้ว สำหรับการ query ส่วนใครจะ query ยังไงก็แล้วแต่สะดวก
ประเด็นก็คือ เลือกจังหวัดมายัดใส่ Combo box รอไว้ พอเลือกจังหวัดเสร็จก็เรียก JavaScript ให้ทำงาน ส่วนอันอื่นเป็น div ว่าง ๆ ไว้ก่อน
2.JavaScript
function newXmlHttp(){
var xmlhttp = false;
var contentType = "application/x-www-form-urlencoded; charset=utf-8";
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}
if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function getAmphur(p){
pagefile="amphur_list.php?P="+p;
var getcontent;
getcontent =newXmlHttp();
getcontent.open('GET', pagefile, true);
getcontent.onreadystatechange = function(){
if (getcontent.readyState == 4 && getcontent.status == 200) {
document.getElementById('AmphurList').innerHTML = getcontent.responseText;
}
}
getcontent.send(null);
}
function getTumbol(p,a){
pagefile="tumbol_list.php?P="+p+"&A="+a;
var getcontent;
getcontent =newXmlHttp();
getcontent.open('GET', pagefile, true);
getcontent.onreadystatechange = function(){
if (getcontent.readyState == 4 && getcontent.status == 200) {
document.getElementById('TumbolList').innerHTML = getcontent.responseText;
}
}
getcontent.send(null);
}
หลักการก็คือ
พอเลือกจังหวัดก็เรียก JavaScript ชื่อ getAmphur ซึ่งจะไปเรียกไฟล์ PHP amphur_list.php ซึ่งมีหน้าที่ไปดึงรายการอำเภอของจังหวัด จากฐานข้อมูลมา แล้ว getAmphur ก็ยัดข้อมูลลงไปใน div ว่าง ๆ ที่ชื่อ AmphurList ของ form ที่เตรียมไว้
พอเลือกอำเภอก็เรียก JavaScript ชื่อ getTumbol ซึ่งจะไปเรียกไฟล์ PHP tumbol_list.php ซึ่งมีหน้าที่ไปดึงรายการตำบลของอำเภอ จากฐานข้อมูลมา แล้ว getTumbol ก็ยัดข้อมูลลงไปใน div ว่าง ๆ ที่ชื่อ TumbolList ของ form ที่เตรียมไว้เช่นกัน
3.PHP
3.1 amphur_list.php
$Output="";
echo $Output;
3.2 tumbol_list.php
$Output=" $SQL="SELECT id,name FROM sci._tumbol WHERE province='".$_GET["P"]."' AND amphur='".$_GET["A"]."'";
$NumRows=$myDB->Query($SQL);
while($row=$myDB->GetRow()){
$Output.="";
}
$Output.="";
echo $Output;
Comments