เทคนิคการใช้งาน element แบบ Array

ผมเคยพูดถึงการใช้งาน Input ภายในฟอร์ม มาแล้ว แต่ก็ยังคงมีปัญหามาถามกันไม่หยุดหย่อน ผมก็เลยลองเอาส่วนที่มักเข้าใจผิดกันมาเขียนให้ดูในบทความนี้อีกที

ลักษณะการใช้งาน Input แบบ Array ที่มักใช้ผิดกันบ่อยๆ คือการใช้ Array แบบไม่ระบุอันดับ ตัวอย่าง

<input type="text" name="title[]">
<input type="text" name="title[]">

วิธีนี้ใช้งานได้ครับ ถ้าใช้งานเพื่อการ Submit เฉยๆ แต่ไม่สามารถใช้งานได้ หากใช้ร่ามกับ Javascript เนื่องจาก Javascript ไม่สามารถอ่านชื่อเป็น Array ออกมาได้

การแก้ปัญหา เราต้องกำหนดชื่อที่ชัดเจนลงไปเลยครับว่าเป็น Array อันดับที่เท่าำไร เช่น text[0], text[1]

<form name="frm" method="post" action="?">
<p><input type="text" name="title[0]"></p>
<p><input type="text" name="title[1]"></p>
<p><input type="text" name="title[2]"></p>
<p><input type="text" name="title[3]"></p>
<p><input type="text" name="title[4]"></p>
<input type="button" value="Alert" onclick="doclick()" />
<input type="submit" value="Submit" />
 </form>

ส่วนการอ่านค่าด้วย Javascript เราก็ต้องใช้วิธีอ้างถึง Object elements ของฟอร์มครับ

<script type="text/javascript">
 function doclick() {
     alert(frm.elements['title[0]'].value);
 }
 </script>

เพียงแค่นี้เราก็จะอ่านค่าด้วย Javascript ได้แล้ว
ผู้เขียน goragod โพสต์เมื่อ 25 ม.ค. 2552 เปิดดู 7,563 ป้ายกำกับ JavascriptForm
^