KomKid: JavaScript : AJAX for Province, Amphur, Tumbol

Friday, December 11, 2009

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


	$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;

KomKid

Friday, December 11, 2009

JavaScript : AJAX for Province, Amphur, Tumbol

No comments:

Labels