ป้องกันคลิก ส่งค่าซ้ำๆ
form รับข้อมูลที่มีขนาดใหญ่ เวลาที่เรากดส่ง มันจะรอนาน ยิ่งถ้า server ทำงานมากๆ แล้วตอบสนองช้าๆ ก็จะเพิ่มเวลารอนานขึ้นไปอีก และจะส่งผลให้ user กด submit ซ้ำเข้ามาได้ ซึ่งบางระบบหากไมเช็คให้ดีก็ error ไปเลย หรือว่าบางระบบก็ทำงานไม่สมบูรณ์ได้เช่นกัน
ปัญหานี้ใช้คำสั่ง jQuery มาช่วยงานเรา ง่ายนิดเดียวเลย
สมมุติว่า ปกติเรามี Form หน้าเว็บแบบนี้
<form action="test" name="testform" method="post" id="inviter">
<span id="sendingmail"><input type="submit" name="submit" value="submit" id="sendemail"></span>
</form>
เมื่อกด submit หาก server ช้าหน้าจะยังไม่เปลี่ยนทำให้ปุ่มถูกกดซ้ำได้ เราแก้ด้วย javascript jQuery ได้ด้วย
$("#inviter").submit(function(){
$("#sendingmail").html("ระบบกำลังทำการส่งอีเมล์โปรดรอสักครู่.....");
return true;
});
แปลได้ว่า form id inviter ถูกกดส่งเมื่อไร id sendingmail ให้เปลี่ยนค่าไปเป็น "ระบบกำลังทำการส่งอีเมล์โปรดรอสักครู่....." จังหวะเดียวกับที่ทำให้ปุ่มหายไป เพราะว่าในตอนแรก id sendingmail มีปุ่มอยู่
เห็นไหมครับ ว่ามันง่ายนิดเดียว
เขียน: 2010-04-23 00:16:28 แก้ไข : 2010-04-23 00:16:28 อ่าน : 2724
tag : กัน ดับเบิ้ลคลิก,กันส่งค่าซ้ำ,jquery,javascript,ลบปุ่ม submit,ซ่อนปุ่ม form
tag : กัน ดับเบิ้ลคลิก,กันส่งค่าซ้ำ,jquery,javascript,ลบปุ่ม submit,ซ่อนปุ่ม form