เทคนิคการใช้งาน element แบบ Array
ผมเคยพูดถึงการใช้งาน Input ภายในฟอร์ม มาแล้ว แต่ก็ยังคงมีปัญหามาถามกันไม่หยุดหย่อน ผมก็เลยลองเอาส่วนที่มักเข้าใจผิดกันมาเขียนให้ดูในบทความนี้อีกที
ลักษณะการใช้งาน Input แบบ Array ที่มักใช้ผิดกันบ่อยๆ คือการใช้ Array แบบไม่ระบุอันดับ ตัวอย่าง
วิธีนี้ใช้งานได้ครับ ถ้าใช้งานเพื่อการ Submit เฉยๆ แต่ไม่สามารถใช้งานได้ หากใช้ร่ามกับ Javascript เนื่องจาก Javascript ไม่สามารถอ่านชื่อเป็น Array ออกมาได้
การแก้ปัญหา เราต้องกำหนดชื่อที่ชัดเจนลงไปเลยครับว่าเป็น Array อันดับที่เท่าำไร เช่น text[0], text[1]
ส่วนการอ่านค่าด้วย Javascript เราก็ต้องใช้วิธีอ้างถึง Object elements ของฟอร์มครับ
เพียงแค่นี้เราก็จะอ่านค่าด้วย Javascript ได้แล้ว
ลักษณะการใช้งาน 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 ได้แล้ว