December 10th, 2009

You are currently browsing the articles from KomKid.Net written on December 10th, 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

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.