การส่งค่าด้วย Ajax หลายๆแถวใน 1 ฟอร์ม
วิธีคิด
- แบ่งข้อมูลออกเป็นแถวและมีหมายเลขแถว อาจใช้จำนวนนับ 1 2 3 4 5 ..... ก็ได้ หรือ อาจใช้ ID ของข้อมูลก้ได้ เนื่องจาก 1 แถว คือ 1 ข้อมูลอยู่แล้ว
- ใช้ ID ตามข้อ 1 กำหนดให้เป็น id ของ input แต่ละตัว รวมถึงปุ่มกดด้วย เช่น name_1, email_1,button_1 และ name_2,email_2_button_2 ....... ซึ่ง input แต่ละตัวก็จะไม่มี id ที่ซำกันเลย (ในกรณีนี้ name ไม่มีความจำเป็นเลยครับ)
- ดักจับ event onclick ที่ปุ่ม แล้วทำการส่งค่า โดยดูจาก ID ของปุ่มกด ว่าเป็น ID อะไร แล้วแทนที่ ID ของปุ่มกด ด้วย ID ของ input ในแถว ซึ่งมีเลขเดียวกัน แล้วอ่านค่า และส่งไป Ajax
<script>
var buttonClick = function() {
var id = this.id.replace('button_', ''); // อ่าน ID ว่าปุ่มใดถูกกด
var name = document.getElementById('name_' + id); // input name
var email = document.getElementById('email_' + id); // input emai
var q = 'id=' + id + '&name=' + encodeURIComponent(name.value) + '&email=' + encodeURIComponent(email.value);
// เขียนคำสั่งเพื่อส่งค่า
alert(q);
};
</script>
<p>
<input type=text id=name_1 value=a>
<input type=text id=email_1 value=b>
<input type=button id=button_1 value=Send onclick="buttonClick.call(this)">
</p>
<p>
<input type=text id=name_2 value=c>
<input type=text id=email_2 value=d>
<input type=button id=button_2 value=Send onclick="buttonClick.call(this)">
</p>