การอัปเดทฐานข้อมูลด้วย Ajax ทันที่ที่คลิกที่ checkbox
<!-- เรียกใช้งาน GAjax สามารถดาวน์โหลดไฟล์นี้ตาม URL ที่ปรากฏ เพื่อนำไปใช้งานนอก Server ได้ -->
<script type="text/javascript" src="https://www.goragod.com/js/gajax.js"></script>
<!-- Javascript ที่ใช้งาน -->
<script type="text/javascript">
// เริ่มต้นทำงานเมื่อโหลดหน้าเว็บเสร็จ
$G(window).Ready(function(){
// เรียกใช้งาน GAjax
var req = new GAjax();
// เลือก input แต่ละตัว
forEach($G('demo_form').getElementsByTagName('input'), function(input){
// ตรวจสอบว่าเป็น checkbox
if (input.type.toLowerCase() == 'checkbox') {
// เรียกใช้ event click
input.onclick = function () {
// ใช้ Ajax ส่งค่าไปอัปเดทที่ check_update.php
req.send('checkbox_update.php', 'name=' + this.name + '&value=' + (this.checked == true ? 1 : 0), function(xhr) {
// รับค่ากลับ และ alert
alert(xhr.responseText);
});
}
}
});
});
</script>
<!-- Javascript ที่ใช้งาน -->โค้ดด้านบนไม่มีอะไรมากครับ วนลูปไปที่ input ของฟอร์มทั้งหมด แล้วเลือกเอา input ชนิด checkbox เท่านั้น มากำหนด event onclick ที่ event นี้ เมื่อคลิกแล้ว จะทำการส่งข้อมูลไปอัปเดทที่ checkbox_update.php
<form id="demo_form">
<?php
for ($i = 0 ; $i < 10 ; $i++) {
echo '<p><input type="checkbox" name="check['.$i.']" value="'.$i.'" /> รายการที่ '.($i + 1).'</p>';
}
?>
<p><input type="submit" name="submit" /></p>
</form>ฟอร์มที่ใช้ครับ ปุ่ม submit ไม่ได้ใช้ประโยชน์อะไรในกรณีนี้ ผมสร้างขึ้นมาเพื่อให้เห็นว่า โค้ด มันแยก checkbox ออกจาก input อื่นๆได้ยังไงเท่านั้น
<?php
// checkbox_update.php
header("content-type: text/html; charset=UTF-8");
// ค่าที่รับมา
$name = $_POST['name'];
$value = (int)$_POST['value'];
// แยก id ออกมาจาก name ที่ส่งมา
if (preg_match('/check\[([0-9]+)\]/', $name, $match)) {
// print_r($match); // ดูค่าที่อ่านได้
$id = (int)$match[1];
// เขียนคำสั่งอัปเดทฐานข้อมูลที่นี่
// ตัวอย่าง คืนค่าเพื่อแสดงผล
echo 'ข้อความจาก Server อัปเดทรายการที่ '.($id + 1).' '.($value == 1 ? 'เลือก' : 'ไม่เลือก').' checkbox เรียบร้อย';
}
?>
ดูตามโค้ดได้เลยนะครับ คำอธิบายอยู่ที่โค้ดแล้ว ในตัวอย่างนี้ผมแสดงการดึงข้อมูลที่ต้องการออกมาจากค่าที่ส่งมา ในเวลาใช้งานก็นำค่าที่ได้ส่งไปอัปเดทฐานข้อมูลก็ได้ ส่วนการส่งกลับ จะทำหรือไม่ก็แล้วแต่กรณีไป