การส่งหลายๆค่าพร้อมกัน ด้วย Ajax

[abdkode]

การใช้งาน ajax เราส่งค่าหลายๆแถวหรือหลายฟิลด์ใน 1 ฟอร์มด้วย ajax ได้ ในที่นี้คือโดยการกดปุ่มเพื่อทำการส่งข้อมูลทีละแถวด้วย 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>

ตัวอย่างฟอร์มจากโค้ดด้านบน

Ajax.jpg (5.77 KiB) Viewed 2436 times

เมื่อเรากดปุ่ม sand ก็จะส่งข้อมูลทั้งสองอินพุตไปพร้อมกัน
ดังผลลัพธ์ด้านล่าง

Ajax2.jpg (7.29 KiB) Viewed 2436 times

จะเห็นได้ว่าไม่ว่าเราต้องการจะส่งกี่ฟิลด์ต่อแถวก็สามารถทำได้ ดังตัวอย่างมีสองฟิลด์ เมื่อกดจะ alert เพื่อเห็นว่ามีข้อมูลอะไรที่ส่งไป และต่อไปก็ส่งให้ ajax ทำงานต่อไป

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Ajax
-ศึกษาความรู้เกี่ยวกั ฺ Bootstrap
-บทเรียน HTML
-ศึกษาความรู้เกี่ยวกั ฺCSS
-ถามตอบเกี่ยวกับ PHP
-ศึกษาความรู้เกี่ยวกับ PHP