Handling array of HTML Form Elements in JavaScript and PHP
วิธีจัดการกับ HTML Array ด้วย javaScript และ PHP
วิธีการจัดการ HTML Array ง่ายๆ ด้วย JavaScript และ PHP หลายคนเคยเจอปัญหา เวลาทำ เว็บฟอร์ม ที่มีช่องให้กรอกข้อมูล หรือ CheckBox หลายๆ อัน (Multiple Check box) แต่ต้องการให้เป็นชื่อเดียวกัน เช่น มี Options ให้เลือกหลายๆ อัน ผมเคยเสียเวลาในการหาิวิธีจัดการกับ Form แบบนี้ไปหลายชั่วโมง ก้อเลยอยากจะเอามา Share กัน เผื่อใครที่กำลังหาวิธีอยู่ จะได้ไม่ต้องเสียเวลานาน
[ad#banner-with-link]
การสร้าง HTML Array
เราสามารถสร้าง HTML Array ได้ง่ายๆ เพื่อ Grouping Object เดียวกัน โดยการใช้ตัวแปรที่มีชื่อเหมือนกัน แล้วตามด้วย เครื่องหมาย [ ] ไม่ต้องใส่อะไรไว้ข้างใน เรียงต่อกันไปเรื่อยๆ ก้อจะเป็น Array ชุดนึงขึ้นมา เช่น ต้องการให้ User กรอกข้อมูล เกี่ยวกับหนังสือที่ตัวเองชอบ ก้อจะสร้าง Text box หลายๆ อันโดยใช้ชื่อเดียวกันว่า books[ ] ดังนี้
<input name="books[]" type="text" size="20" maxlength="40" />
<input name="books[]" type="text" size="20" maxlength="40" />
<input name="books[]" type="text" size="20" maxlength="40" />
How to handle array of HTML form elements using PHP
วิธีการอ่านค่าจาก HTML Array ด้วย PHP
วิธีง่ายๆ ถ้าคุณ Submit Form ที่มี HTML Code ด้านบน คุณจะสามารถอ่านค่าจาก Array ด้วย PHP จากตัวแปร $_POST['books'] ด้วยฟังก์ชั่น foreach() เพื่อ Loop อ่านค่าออกมา ดังนี้
foreach($_POST['books'] as $key=>$value)
{
echo $key.' '.$value;
}
How to handle array of Form elements using JavaScript
วิธีการอ่านค่าจาก HTML Arrray ด้วย JavaScript
การอ่านค่าจาก HTML Array ด้วย JavaScript ต้องใช้เทคนิก นิดหน่อย เพื่อเข้าไปเอาค่าจาก แต่ละ Object ของ javaScript มาใช้งาน โดยการ get elements ของ Object ออกมาก่อน ด้วย
var mutli_books = document.form_name.elements["books[]"];
After storing the object in the variable, we can access the individual variables in the following way in JavaScript
หลังจากนั่น ก้อใช้ For Loop เพื่อ access เข้าไปอ่านค่าใน Array แต่ละตัว ตั้งแต่ตัวแรก array[0] ถึงตัวสุดท้าย array[n] ดังนี้
for(i=0;i<mutli_books.length;i++) { alert(mutli_education[i].value); }
แค่นี้ก้อจะจัดการกับ HTML Arry ได้แล้วครับ ลองทำดูนะครับ
<HTML>
<HEAD>
<TITLE> HTML Array </TITLE><script language=”JavaScript”>
function chkForm()
{var mutli_books = document.forms[0].elements["books[]“];
for(i=0;i<mutli_books.length;i++)
{
alert(mutli_books[i].value);
}
}</script>
</HEAD><BODY>
<FORM METHOD=POST ACTION=”" NAME=”frm1″>
<input name=”books[]” type=”text” size=”20″ maxlength=”40″ /><br>
<input name=”books[]” type=”text” size=”20″ maxlength=”40″ /><br>
<input name=”books[]” type=”text” size=”20″ maxlength=”40″ /><br><INPUT TYPE=”button” VALUE=”Submit” ONCLICK=”chkForm();”>
</FORM></BODY>
</HTML>
Tags: JavaScript, PHP
