การร้องขอข้อมูลจากการเลือก checkbox ด้วย AJAX (แบบที่ 2)

ในแบบแรกการร้องขอข้อมูลจะเกิดขึ้นเมื่อเรา submit เท่านั้น ซึ่งในตัวอย่างนั้นเกิดจากการใช้ GForm แต่ในตัวอย่างนี้ ผมได้เปลี่ยนมาใช้ GAjax แทน ซืีงการร้องขอข้อมูลจะเกิดขึ้นทันทีที่มีการคลิก checkbox

<form id="main_form" method="post" action="get_chkarray2.php">

<p><input type="text" id="chk_result" /></p>

</form>

<form id="check_form">

<?php

    for($i = 0 ; $i < 10 ;$i++){

        echo "<p><input type=\"checkbox\" class=\"chkarray\" name=\"check[]\" value=\"$i\" />$i</p>\n";

    }

?>

</form>

โค้ดฟอร์มในตัวอย่างนี้ มีด้วยกัน 2 ฟอร์มครับ main_form จะเป็นฟอร์มข้อมูลปกติ ที่จะใช้ submit และ check_form ซึ่งเอาไว้ใช้สำหรับ checkbox เท่านั้น แต่ก็สามารถใช้ฟอร์มเดียวกันได้ครับ ซึ่งถ้าใช้ฟอร์มเดียวกัน ค่าของ checkbox ที่ถูกเลือกก็จะถูกส่งไปพร้อมกันกับ input อื่นๆของฟอร์มในตอน submit ด้วย

<script type="text/javascript">

// วนลูป input ทุกตัวในฟอร์ม

forEach($E('check_form').getElementsByTagName('input'), function(item){

    // เลือกเฉพาะรายการที่มี class = chkarray ตามที่กำหนดในฟอร์ม

    if(item.className == 'chkarray'){

        // กำหนด event เมื่อ click ให้กับ checkbox แต่ละตัว

        $G(item).addEvent('click', doCheckClick)

    };

});

</script>

โค้ด Javascript สำหรับจัดการกับ checkbox เพื่อกำหนด event click ให้กับ checkbox ซึ่งเมื่อมีการคลิกเลือกก็จะไปเรียกฟังก์ขั่น doCheckClick ให้ทำงาน

<script type="text/javascript">

var doCheckClick = function(event){

    var req = new GAjax();

    req.send('chkarray.php' ,req.getRequestBody('check_form') ,function(xhr) {

        $E('chk_result').value = xhr.responseText;

    });



};

</script>

ฟังก์ชั่น doCheckClick ครับทำหน้าที่ในการส่งข้อมูลด้วย GAJAX เพื่อร้องขอข้อมูลจาก Server โดยส่งไปร้องขอข้อมูลจาก chkarray.php

<?php

    $r = 0;

    if(isset($_POST[check])) foreach($_POST[check] AS $item){

        $r = $r + $item;

    }

    echo $r;

?>

โค้ด chkarray.php ในตัวอย่างนี้ทำหน้าที่รวมผลลัพท์ของ checkbox ที่เลือก แล้วส่งค่ากลับไปแสดงผลเหมือนคัวอย่างก่อนหน้าครับ

ตัวอย่าง