สำหรับบทความนี้เป็นการสาธิต JavaScript กับการส่งข้อมูลหลายชุดในแบบฟอร์มเดียวกัน โดยใช้ความสามารถของ jQuery เพื่อส่งข้อมูลแบบ AJAX อย่างง่ายๆ
วิดีโอสาธิตการทำงาน
ตัวอย่างแบบฟอร์ม
ตรวจสอบข้อมูลที่ส่งไปด้วย PHP
show_request.php
จากตัวอย่างเมื่อป้อนข้อมูลตามภาพแล้วกดปุ่ม Send จะเป็นการเรียกฟังก์ชั่น send_data() ไม่ใช่การ Submit ฟอร์มเหมือนทุกครั้ง โดยในฟังก์ชั่น send_data() จะทำการตรวจสอบตัวเลือกทุกครั้งว่าต้องการข้อมูลชุดไหน และส่งไปหน้าไหนบ้าง
หวังว่าตัวอย่างโค๊ดชุดนี้ จะเป็นประโยชน์ และสามารถประยุกต์ไปใช้ในงานที่ทุกท่านต้องการคล้ายๆกันนี้ได้นะครับ ^^
วิดีโอสาธิตการทำงาน
ตัวอย่างแบบฟอร์ม
<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"/>
<!-- Button ธรรมดาเพราะจะส่งผ่าน AJAX -->
<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
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ความคิดเห็น
แสดงความคิดเห็น