Ajax กับ jQuery สร้างฟังก์ชั่น JavaScript สำหรับส่งค่าข้อมูลหลายชุดในแบบฟอร์มเดียวกัน

สำหรับบทความนี้เป็นการสาธิต JavaScript กับการส่งข้อมูลหลายชุดในแบบฟอร์มเดียวกัน โดยใช้ความสามารถของ jQuery เพื่อส่งข้อมูลแบบ AJAX อย่างง่ายๆ

วิดีโอสาธิตการทำงาน

ตัวอย่างแบบฟอร์ม

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<form method="post" name="myform" id="myform" >
    
    <input name="aa" id="aa" value="" type="hidden" style="width: 785px;">
    <input name="bb" id="bb" value="" type="hidden" style="width: 785px;">
    <input name="cc" id="cc" value="" type="hidden" style="width: 785px;">

    
    <select id="hotel">
        <option value="1">Red Hotel</option>
        <option value="2">Black Hotel</option>
    </select>
    <input class="date" name="date" />
    <input class="select" name="night" />
    <input class="select" name="room" />
    <input class="select" name="adult"/>

    
    <input type="button" class="button" value="Send" onclick="send_data();" style="width: 134px;">


</form>
<h1 id="result">....</h1>
<script type="text/javascript">

function send_data(){
    var hotel = $('#hotel').val();
    var my_url = "";
    if(hotel == 1){
        $('#aa').val('1111');
        $('#bb').val('2222');
        $('#cc').val('3333');
        my_url = "show_request.php?hotel=1";
    }else if(hotel==2){
        $('#aa').val('4444');
        $('#bb').val('5555');
        $('#cc').val('6666');
        my_url = "show_request.php?hotel=2";
    }

    var all_data = $('#myform').serialize();

    //TEST
    alert(all_data);
    all_data += '&url='+ my_url;

    $.ajax({
       type: "POST",
       url: my_url,
       data: all_data,
       success: function(return_data) {
        $('#result').html('success : ' + return_data);
       }
    });

}

</script>

ตรวจสอบข้อมูลที่ส่งไปด้วย PHP
show_request.php

<?php

echo '<pre>';
print_r($_POST);
echo '</pre>';

?>

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

หวังว่าตัวอย่างโค๊ดชุดนี้ จะเป็นประโยชน์ และสามารถประยุกต์ไปใช้ในงานที่ทุกท่านต้องการคล้ายๆกันนี้ได้นะครับ ^^




       "PHP ไม่ได้สร้างสุดยอดโปรแกรม 
                 แต่ PHP ช่วยให้งานคุณง่ายขึ้นต่างหาก"


PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนใจสั่งซื้อเพียง 3,990 บาท
http://fastcoding.phpcodemania.com/







PHP CI MANIA - PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้มเพียง 3,990 บาท 
http://www.phpcodemania.com

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้