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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    $ProvinceSelect.="<select name='ProvinceId'  onClick='javascript:getAmphur(this.value);'>";
    $SQL="SELECT id,name FROM sci._province ORDER BY id";
    $NumRows=$myDB->Query($SQL);
    while($row=$myDB->GetRow()){
         $ProvinceSelect.="<option value='".$row["id"]."'> ".$row["name"]."</option>";
    }
    $ProvinceSelect.="</select></div>";

    $AmphurSelect="<div id='AmphurList'>";
    $AmphurSelect.="<select name='AmphurId' >";
    $SQL="SELECT id,name FROM sci._amphur WHERE id='".$AmphurId."' AND province='".$ProvinceId."'";
    $NumRows=$myDB->Query($SQL);
    while($row=$myDB->GetRow()){
        $AmphurSelect.="<option value='".$row["id"]."'> ".$row["name"]."</option>";
    }
    $AmphurSelect.="</select></div>";

    $TumbolSelect="<div id='TumbolList'>";
    $TumbolSelect.="<select name='TumbolId' >";
    $SQL="SELECT id,name FROM sci._tumbol WHERE id='".$TumbolId."' AND amphur='".$AmphurId."' AND province='".$ProvinceId."'";
    $NumRows=$myDB->Query($SQL);
    while($row=$myDB->GetRow()){
        $TumbolSelect.="<option value='".$row["id"]."'> ".$row["name"]."</option>";
    }
    $TumbolSelect.="</select></div>";

$myDB->Query($SQL);
อันนี้คือ class ที่ผมทำเอาไว้แล้ว สำหรับการ query ส่วนใครจะ query ยังไงก็แล้วแต่สะดวก
ประเด็นก็คือ เลือกจังหวัดมายัดใส่ Combo box รอไว้ พอเลือกจังหวัดเสร็จก็เรียก JavaScript ให้ทำงาน ส่วนอันอื่นเป็น div ว่าง ๆ ไว้ก่อน

2.JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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

1
2
3
4
5
6
7
8
    $Output="<select name='AmphurId' onClick='javascript:getTumbol(document.EmpData.ProvinceId.value,this.value);'>";
    $SQL="SELECT id,name FROM sci._amphur WHERE province='".$_GET["P"]."'";
    $NumRows=$myDB->Query($SQL);
    while($row=$myDB->GetRow()){
      $Output.="<option value='".$row["id"]."'>".$row["name"]."</option>"; 
    }
    $Output.="</select>";
   echo $Output;

3.2 tumbol_list.php

1
2
3
4
5
6
7
8
    $Output="<select name='TumbolId'";
    $SQL="SELECT id,name FROM sci._tumbol WHERE province='".$_GET["P"]."' AND amphur='".$_GET["A"]."'";
    $NumRows=$myDB->Query($SQL);
    while($row=$myDB->GetRow()){
      $Output.="<option value='".$row["id"]."'>".$row["name"]."</option>"; 
    }
    $Output.="</select>";
   echo $Output;

Written by Komkid on December 10th, 2009 with no comments.
Read more articles on JavaScript and Programming.

Related articles

No comments

There are still no comments on this article.

Leave your comment...

If you want to leave your comment on this article, simply fill out the next form:

You have to be identified to write a comment.