วิธีการคือดเราจะแบ่งข้อมูลออกเป็นแถวและมีหมายเลขแถว อาจใช้จำนวนนับ 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>
ดังผลลัพธ์ด้านล่าง จะเห็นได้ว่าไม่ว่าเราต้องการจะส่งกี่ฟิลด์ต่อแถวก็สามารถทำได้ ดังตัวอย่างมีสองฟิลด์ เมื่อกดจะ alert เพื่อเห็นว่ามีข้อมูลอะไรที่ส่งไป และต่อไปก็ส่งให้ ajax ทำงานต่อไป
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Ajax
-ศึกษาความรู้เกี่ยวกั ฺ Bootstrap
-บทเรียน HTML
-ศึกษาความรู้เกี่ยวกั ฺCSS
-ถามตอบเกี่ยวกับ PHP
-ศึกษาความรู้เกี่ยวกับ PHP