Friday, December 11, 2009

JavaScript : AJAX for Province, Amphur, Tumbol

เริ่มจาก ได้ฐานข้อมูล จังหวัด -> อำเภอ -> ตำบล ที่ดีมาก มาจากไหน ตั้งแต่เมื่อไหร่ ไม่รู้ แต่พอจะใช้ขึ้นมา เพิ่งพบว่า ที่ได้มานั้นมันดีจริง ๆ ดียังไง ให้เปิด ตรวจสอบหมายเลขบัตรประจำตัวประชาชน ประกอบครับ (ที่จริงต้องเปิด http://th.wikipedia.org/wiki/เลขประจำตัวประชาชนไทย ด้วย)

มาดูฐานข้อมูลกันก่อน
1.จังหวัด
ตารางเป็นแบบนี้
db_province
ข้อมูลเป็นแบบนี้
data_province
สังเกตดูนะครับ id มันคือ หลักที่ 2+3 ของเลขบัตรประจำตัวประชาชน

2.อำเภอ
ตารางเป็นแบบนี้
db_amphur
ข้อมูลเป็นแบบนี้
data_amphur
id ของตารางนี้ ก็คือ หลักที่ 4+5 ของเลขบัตรประจำตัวประชาชน

3.ตำบล
ตารางเป็นแบบนี้
db_tumbol
ข้อมูลเป็นแบบนี้
data_tumbol
อันนี้ หลักที่ 6-10 ค่อนข้างกว้าง จึงระบุไม่ได้ แต่ได้ 2 อันแรกก็ดูดีแล้วน่ะ

AJAX กับ PHP ก็ต้องเริ่มจาก
1.เตรียมการสำหรับ form

$ProvinceSelect.="
";

$AmphurSelect="
";
$AmphurSelect.="
";

$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="";
echo $Output;

No comments: