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