มีคำถามจากบอร์ดว่าต้องการส่งค่าด้วย Ajax หลายๆแถวใน 1 ฟอร์มได้อย่างไร โดยการกดปุ่มเพื่อทำการส่งข้อมูลทีละแถวด้วย Ajax (ใน 1 แถวประกอบด้วย ช่องกรอกชื่อ ช่องกรอกอีเมล์ และปุ่มกดสำหรับส่งค่าในแถวนั้นๆ)

วิธีคิด

1. แบ่งข้อมูลออกเป็นแถวและมีหมายเลขแถว อาจใช้จำนวนนับ 1 2 3 4 5 ..... ก็ได้ หรือ อาจใช้ ID ของข้อมูลก้ได้ เนื่องจาก 1 แถว คือ 1 ข้อมูลอยู่แล้ว
2. ใช้ ID ตามข้อ 1 กำหนดให้เป็น id ของ input แต่ละตัว รวมถึงปุ่มกดด้วย เช่น name_1, email_1,button_1 และ name_2,email_2_button_2 ....... ซึ่ง input แต่ละตัวก็จะไม่มี id ที่ซำกันเลย (ในกรณีนี้ name ไม่มีความจำเป็นเลยครับ)
3. ดักจับ 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>