GORAGOD.com

การอัปเดทฐานข้อมูลด้วย Ajax ทันที่ที่คลิกที่ checkbox เป็นอะไรที่ไม่ยากเลยครับ เพราะเป็นงานที่เหมาะสมกับ Ajax อยู่แล้ว ทำให้ไม่ต้องเสียเวลาเพื่อ Submit อีก สำหรับตัวอย่างนี้ เป็นการใช้ร่วมกับ GAjax นะครับ ใครไม่มีก็ดาวน์โหลดเวอร์ชั่นล่าสุดได้เลยที่ https://www.goragod.com/js/gajax.js

<!-- เรียกใช้งาน 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 เรียบร้อย';
     }
?>

ดูตามโค้ดได้เลยนะครับ คำอธิบายอยู่ที่โค้ดแล้ว ในตัวอย่างนี้ผมแสดงการดึงข้อมูลที่ต้องการออกมาจากค่าที่ส่งมา ในเวลาใช้งานก็นำค่าที่ได้ส่งไปอัปเดทฐานข้อมูลก็ได้ ส่วนการส่งกลับ จะทำหรือไม่ก็แล้วแต่กรณีไป

ตัวอย่าง