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

ตัวอย่างนี้้เป็นตัวอย่างการร้องขอข้อมูลจาก Server หลังจาก submit โดยใช้ GFrom ซึ่งข้อมูลที่ต้องการ สามารถเลือกได้โดยใช้ checkbox ทำการเลือก และเมื่อ submit ไปแล้ว เราจะได้ข้อมูลที่ต้องการกลับมา เป็นการประยุกต์ใช้ checkbox ในแบบแอเรย์แบบหนึ่งครับ

ในตัวอย่างนี้ ผมได้ให้ข้อมูลที่ส่งกลับมาแสดงเป็นผลรวมของ checkbox ทุกๆตัวที่ถูกเลือก ซึ่งเราอาจได้ผลลัพท์นี้มาจากวิธีอื่นๆก็ได้นะครับ เช่นการ query ข้อมูลออกมาจากฐานข้อมูลก็ได้

<form id="check_form" method="post" action="chkarray.php">

<?php

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

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

    }

?>

<p><input type="text" id="chk_result" /><input type="submit" value="Get Data" /></p>

</form>

โค้ดฟอร์มของข้อมูลครับ โดยมี checkbox จำนวน 10 ตัวเป็นแบบ Array ชื่อ check โดยมีค่าตั้งแต่ 0 - 9 (สามารถ view source ได้จากตัวอย่างเลยนะครับ)

<script type="text/javascript">

new GForm('check_form').onsubmit(doGetCheck);

</script>

โค้ด Javascript ที่เกี่ยวข้องกับฟอร์มครับ ถ้าไม่เข้าใจลองไปดูบทเรียนเกี่ยวกับ GForm ครับ

<script type="text/javascript">

var doGetCheck = function(xhr){

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

};

</script>

โค้ด Javascript ที่รับค่าจาก GForm ครับ สามารถเอาไปไว้ไฟล์ JS ภายนอกได้ครับ มีหน้าที่รับข้อมูลที่ส่งกลับมา แล้วนำไปใส่ใน textbox เท่านั้นครับ

<?php

    $r = 0;

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

        $r = $r + $item;

    }

    echo $r;

?>

โค้ด chkarray.php ซึ่งรับค่า submit มาจากฟอร์ม check_form ซึ่งในตัวอย่างนี้ ค่าของ checkbox ที่ถูกเลือกจะถูกส่งมาที่ $_POST[check] ซึ่งเป็น Array ตามที่กำหนดในฟอร์ม และตามตัวอย่าง ผมได้ทำการวนลูปเพื่อรวมค่าของ check ที่ถูกเลือกและส่งกลับไปแสดงผลครับ

ตัวอย่าง view source ดูโค้ดได้นะครับ