เทคนิคการใช้งาน 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 ได้แล้ว