GORAGOD.com

บทความนี้จะใช้ GAjax ในการตรวจสอบการเลือก input(radio) แบบ Array ตั้งแต่การออกแบบฟอร์ม input รวมถึง Javascript ที่ใช้ในการตรวจสอบ

<form id="choice_frm" method="post" action="radio_submit.php">

<div class="sec" id="choice_1">
<p><input type="radio" name="choice1[]" value="ตัวเลือกที่ 1" /> ตัวเลือกที่ 1</p>
<p><input type="radio" name="choice1[]" value="ตัวเลือกที่ 2" /> ตัวเลือกที่ 2</p>
<p><input type="radio" name="choice1[]" value="ตัวเลือกที่ 3" /> ตัวเลือกที่ 3</p>
</div>

<div class="sec" id="choice_2">
<p><input type="radio" name="choice2[]" value="ตัวเลือกที่ 1" /> ตัวเลือกที่ 1</p>
<p><input type="radio" name="choice2[]" value="ตัวเลือกที่ 2" /> ตัวเลือกที่ 2</p>
<p><input type="radio" name="choice2[]" value="ตัวเลือกที่ 3" /> ตัวเลือกที่ 3</p>
</div>

<p><input type="submit" value="Submit." /></p>
</form>

มาดูการออกแบบฟอร์มกันก่อน หลักการที่สำคัญก็คือเราจะต้องแบ่งฟอร์มออกเป็นแต่ละส่วนสำหรับแต่ละข้อ ตามตัวอย่่างผมใช้ div ครับ เหตุผลที่ผมทำแบบนี้ก็เพื่อที่จะสามารถออกแบบ Javascript สำหรับการตรวจสอบการเลือกในแต่ละข้อสามารถทำได้ง่ายๆ และ เพื่อที่จะสามารถทำ Highlight ข้อที่ยังไม่ได้เลือกได้ด้วย โดยที่สิ่งสำคัญที่ต้องกำหนดสำหรับ div ที่ใช้สำหรับเป็นข้อ ก็คือการกำหนด คือ id="choice_1" ครับ ซึ่ง choice_ ใช้สำหรับเป็น selector เพื่อบอกว่า div นี้คือ ส่วนของข้อแต่ละข้อ และ ตัวเลข 1 คือข้อของคำถามซึ่งสัมพันธ์กันกับ input ที่ใช้ในข้อนั้นๆ

สำหรับ input แบบ radio ที่ใช้ ผมกำหนดเป็น input แบบ Array โดยที่ แต่ละตัวจะมี name ที่เป็นชื่อของข้อนั้นๆ เช่น choice1 สำหรับข้อที่ 1 หรือ choice2 สำหรับข้อที่ 2 เป็นต้น

<script src="gajax.js"></script>
<script>
function checkChoice(choice) {
    var item, i;
    var radio = 0;
    /* input ทั้งหมดของแต่ละ choice */
    var inputs = choice.getElementsByTagName('input');
    /* วนลูป input ทั้งหมด */
    for (i = 0 ; i < inputs.length ; i++){
        item = inputs[i];
        /* เลือกเฉพาะ radio */
        if(item.type.toLowerCase() == 'radio'){
            /* อัปเดทจำนวน radio */
            radio++;
            if(item.checked){
                /* มี radio ตัวใดตัวหนึ่งถูกเลือก */
                return true;
            }
        }
    }
    /*
    ไม่มี radio เลย คืนค่า true
    ไม่มี radio ตัวใดถูกเลือก คืนค่า false
    */
    return radio === 0 ? true : false;
}
function ConfirmSubmit() {
    var hs, item, i;
    /* สำหรับตรวจสอบว่าเป็นแต่ละข้อ */
    var patt = /choice_([0-9]+)/;
    /* div ทั้งหมดภายในฟอร์ม */
    var divs = $E('choice_frm').getElementsByTagName('div');
    /* วนลูปอ่าน div ของ ตัวเลือกทีละตัว */
    for (i = 0 ; i < divs.length ; i++){
        item = divs[i];
        /* ตรวจสอบ id และ แยกเอา "ข้อที่" ออก */
        if(hs = patt.exec(item.id)){
            if(!checkChoice(item)){
                alert('คุณยังไม่ได้ตอบคำถามข้อที่ ' + hs[1]);
                return false;
            }
        }
    }
    return true;
}
function doSubmit(xhr) {
    /*
    ข้อความตอบกลับจาก Server
    เขียนคำสั่งต่างๆ(Javascript) ที่นี่ หลังจาก ทำการ submit แล้ว
   */
    alert(xhr.responseText);
}
new GForm('choice_frm', null, false, ConfirmSubmit).onsubmit(doSubmit);
</script>

โค้ดด้านบนคือ Javascript ที่ใช้ครับ อย่าลืม include GAjax ด้วย

new GForm('choice_frm', null, false, ConfirmSubmit).onsubmit(doSubmit);

ส่วนนี้คือการกำหนดให้ฟอร์ม Submit แบบ Ajax โดยที่ ConfirmSubmit จะถูกเรียกใช้เพื่อตรวจการเลือก input ก่อน Submit และ doSubmit เป็นฟังก์ชั่นรับค่าหลังจาก submit แล้ว

การตรวจสอบจะเกิดขึ้นเมื่อเรากด Submit GForm จะเรียกให้ ฟังก์ชั่น ConfirmSubmit ทำงาน ซึ่งหาก return flase จากฟังก์ชั่นนี้ ฟอร์มก็จะไม่ถูก Submit

หลักในการตรวจสอบก็คือ เราจะทำการวนลูปตรวจสอบทีละข้อว่าแต่ละข้อมีการเลือก input ตัวใดตัวหนึ่งในนั้นหรือไม่ หากไม่มีการเลือก input ตัวใดเลย ให้แสดงข้อความเตือน รวมทั้ง ทำ Highlight ที่ข้อที่ไม่ได้เลือกด้วย

จากที่ผมกำหนดไว้แต่แรกแล้วว่า เราได้ทำการออกแบบฟอร์มโดยการแบ่งแต่ละข้อเป็นแต่ละ div ดังนั้น การเข้าถึงแต่ละข้อ ก็จะเป็นการเข้าถ้งแต่ละ div ที่กำหนด id เป็น choice_ นั่นเอง

function ConfirmSubmit() {
    var hs, item, i;
    /* สำหรับตรวจสอบว่าเป็นแต่ละข้อ */
    var patt = /choice_([0-9]+)/;
    /* div ทั้งหมดภายในฟอร์ม */
    var divs = $E('choice_frm').getElementsByTagName('div');
    /* วนลูปอ่าน div ของ ตัวเลือกทีละตัว */
    for (i = 0 ; i < divs.length ; i++){
        item = divs[i];
        /* ตรวจสอบ id และ แยกเอา "ข้อที่" ออก */
        if(hs = patt.exec(item.id)){
            if(!checkChoice(item)){
                alert('คุณยังไม่ได้ตอบคำถามข้อที่ ' + hs[1]);
                return false;
            }
        }
    }
    return true;
}

หลังจากที่เราทำการเข้าถึงแต่ละข้อได้แล้ว เราก็จะทำการเรียกฟังก์ชั่น checkChoice() เพื่อทำการตรวจสอบทีละข้อว่า input ในนั้นมีตัวใดตัวหนึ่งถูกเลือกหรือไม่

function checkChoice(choice) {
    var item, i;
    var radio = 0;
    /* input ทั้งหมดของแต่ละ choice */
    var inputs = choice.getElementsByTagName('input');
    /* วนลูป input ทั้งหมด */
    for (i = 0 ; i < inputs.length ; i++){
        item = inputs[i];
        /* เลือกเฉพาะ radio */
        if(item.type.toLowerCase() == 'radio'){
            /* อัปเดทจำนวน radio */
            radio++;
            if(item.checked){
                /* มี radio ตัวใดตัวหนึ่งถูกเลือก */
                return true;
            }
        }
    }
    /*
    ไม่มี radio เลย คืนค่า true
    ไม่มี radio ตัวใดถูกเลือก คืนค่า false
    */
    return radio === 0 ? true : false;
}

หลักการของมันก็คล้ายๆกับการเข้าถึงแต่ละข้อนั่นแหละครับ ก็คือ การเข้าถึง input แต่ละตัวที่อยู่ภายในข้อนั้นๆ และทำการตรวจสอบว่า input นั้นๆเป็น radio หรือไม่ ถ้าใช่ ก็ตรวจสอบว่า มันถูกเลือกหรือไม่ หากมีตัวใดตัวหนึ่งถูกเลือกก็ให้คืนค่า true ออกมา และหากไม่มี radio ตัวใดถูกเลือกเลย ก็จะคืนค่า false และไปแสดงผลการเตือน

นอกจากนี้ฟังก์ชั่นนี้ยังตรวจสอบด้วยว่าในข้อนั้นๆมี input แบบ radio หรือไม่ หากไม่มีเลย ฟังก์ชั่นจะคืนค่า true ออกมาเลย

alert('คุณยังไม่ได้ตอบคำถามข้อที่ ' + hs[1]);
return false;

ซึ่งหากมีข้อใดข้อหนึ่งคืนค่า false ออกมานั่นหมายถึงข้อนั้นๆไม่ได้มีการเลือกคำตอบ ก็จะมีการแสดงข้อความเตือน และ return false ออกมาเพื่อไม่ให้มีการ Submit

<?php
    print_r($_POST);
?>

สำหรับโค้ดใน radio_submit.php ที่เรา submit ไป ในตัวอย่าง ผมทำไว้ให้แค่ ดูค่าที่ส่งมาเท่านั้นนะครับ ซึ่งโดยทั่วไปเราสามารถเขียนโค้ดในนั้นได้เหมือนๆกับการ Submit ด้วยฟร์อมตามปกติ

 ตัวอย่าง View Source ดูโค้ดเต็มๆที่ตัวอย่างเลยนะครับ