Submit Form โดยที่ไม่ต้องรีเฟรช (refresh) หน้าด้วย jQuery

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



ฟอร์ม html ของเรา

<form name="sample-form" id="sample-form" action="sample-action.php">
<input type="text" name="firstname" id="firstname" value="Firstname" /><br/>
<input type="text" name="lastname" id="lastname" value="Lastname" /><br/>
<input type="button" name="submit" id="submit" value="Submit" />
</form><p>
<div id="result"></div>

จากนั้นเราก็ใช้ฟังกร์ชัน .get() ของ jQuery ในการ submit ฟอร์มครับ

$('#submit').click(function(){
//validate form
 $.get('sample-action.php',$('#sample-form').serialize(),function(response){
  $('#result').html(response);
 });
});

ตัวอย่างนี้อาจจะแสดงวิธีการ submit ฟอร์มไว้ง่าย ถ้ายังไงตรงส่วนที่ผมคอมเม้นท์ไว้ว่า validate form เพื่อนๆ ก็อาจจะต้องตรวจสอบก่อนว่าผู้ใช้กรอกข้อมูลครบหรือยังแล้วค่อยเรียกฟังก์ชัน get() ครับ