บทความนี้จะใช้ GAjax ในการตรวจสอบการเลือก input(radio) แบบ Array ตั้งแต่การออกแบบฟอร์ม input รวมถึง Javascript ที่ใช้ในการตรวจสอบ
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
มาดูการออกแบบฟอร์มกันก่อน หลักการที่สำคัญก็คือเราจะต้องแบ่งฟอร์มออกเป็นแต่ละส่วนสำหรับแต่ละข้อ ตามตัวอย่่างผมใช้ div ครับ เหตุผลที่ผมทำแบบนี้ก็เพื่อที่จะสามารถออกแบบ Javascript สำหรับการตรวจสอบการเลือกในแต่ละข้อสามารถทำได้ง่ายๆ และ เพื่อที่จะสามารถทำ Highlight ข้อที่ยังไม่ได้เลือกได้ด้วย โดยที่สิ่งสำคัญที่ต้องกำหนดสำหรับ div ที่ใช้สำหรับเป็นข้อ ก็คือการกำหนด คือ
id="choice_1" ครับ ซึ่ง choice_ ใช้สำหรับเป็น selector เพื่อบอกว่า div นี้คือ ส่วนของข้อแต่ละข้อ และ ตัวเลข 1 คือข้อของคำถามซึ่งสัมพันธ์กันกับ input ที่ใช้ในข้อนั้นๆ
สำหรับ input แบบ radio ที่ใช้ ผมกำหนดเป็น input แบบ Array โดยที่ แต่ละตัวจะมี name ที่เป็นชื่อของข้อนั้นๆ เช่น
choice1 สำหรับข้อที่ 1 หรือ
choice2 สำหรับข้อที่ 2 เป็นต้น
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
โค้ดด้านบนคือ Javascript ที่ใช้ครับ อย่าลืม include
GAjax ด้วย
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
ส่วนนี้คือการกำหนดให้ฟอร์ม Submit แบบ Ajax โดยที่
ConfirmSubmit จะถูกเรียกใช้เพื่อตรวจการเลือก input ก่อน Submit และ
doSubmit เป็นฟังก์ชั่นรับค่าหลังจาก submit แล้ว
การตรวจสอบจะเกิดขึ้นเมื่อเรากด Submit GForm จะเรียกให้ ฟังก์ชั่น ConfirmSubmit ทำงาน ซึ่งหาก return flase จากฟังก์ชั่นนี้ ฟอร์มก็จะไม่ถูก Submit
หลักในการตรวจสอบก็คือ เราจะทำการวนลูปตรวจสอบทีละข้อว่าแต่ละข้อมีการเลือก input ตัวใดตัวหนึ่งในนั้นหรือไม่ หากไม่มีการเลือก input ตัวใดเลย ให้แสดงข้อความเตือน รวมทั้ง ทำ Highlight ที่ข้อที่ไม่ได้เลือกด้วย
จากที่ผมกำหนดไว้แต่แรกแล้วว่า เราได้ทำการออกแบบฟอร์มโดยการแบ่งแต่ละข้อเป็นแต่ละ div ดังนั้น การเข้าถึงแต่ละข้อ ก็จะเป็นการเข้าถ้งแต่ละ div ที่กำหนด id เป็น choice_ นั่นเอง
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
หลังจากที่เราทำการเข้าถึงแต่ละข้อได้แล้ว เราก็จะทำการเรียกฟังก์ชั่น
checkChoice() เพื่อทำการตรวจสอบทีละข้อว่า input ในนั้นมีตัวใดตัวหนึ่งถูกเลือกหรือไม่
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
หลักการของมันก็คล้ายๆกับการเข้าถึงแต่ละข้อนั่นแหละครับ ก็คือ การเข้าถึง input แต่ละตัวที่อยู่ภายในข้อนั้นๆ และทำการตรวจสอบว่า input นั้นๆเป็น radio หรือไม่ ถ้าใช่ ก็ตรวจสอบว่า มันถูกเลือกหรือไม่ หากมีตัวใดตัวหนึ่งถูกเลือกก็ให้คืนค่า true ออกมา และหากไม่มี radio ตัวใดถูกเลือกเลย ก็จะคืนค่า false และไปแสดงผลการเตือน
นอกจากนี้ฟังก์ชั่นนี้ยังตรวจสอบด้วยว่าในข้อนั้นๆมี input แบบ radio หรือไม่ หากไม่มีเลย ฟังก์ชั่นจะคืนค่า true ออกมาเลย
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
ซึ่งหากมีข้อใดข้อหนึ่งคืนค่า false ออกมานั่นหมายถึงข้อนั้นๆไม่ได้มีการเลือกคำตอบ ก็จะมีการ ทำ Highlight ข้อนั้นๆ รวมทั้งแสดงข้อความเตือน และ return false ออกมาเพื่อไม่ให้มีการ Submit
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
ในส่วนของ CSS ที่ใช้ เนื่องจากมีการใช้ GHighlight เลยจำเป็นต้องมีการกำหนด กรอบ และพื้นหลังให้กับแต่ละข้อ เพื่อที่สามารถจะทำการเปลี่ยนสีได้ ดังโค้ดใน div.sec ซึ่งเป็นส่วนของแต่ละข้อ
ขออภัย :: สำหรับสมาชิกเท่านั้น, สมาชิกกรุณาเข้าระบบก่อน
สำหรับโค้ดใน radio_submit.php ที่เรา submit ไป ในตัวอย่าง ผมทำไว้ให้แค่ ดูค่าที่ส่งมาเท่านั้นนะครับ ซึ่งโดยทั่วไปเราสามารถเขียนโค้ดในนั้นได้เหมือนๆกับการ Submit ด้วยฟร์อมตามปกติ
ตัวอย่าง View Source ดูโค้ดเต็มๆที่ตัวอย่างเลยนะครับ
