ป้องกันคลิก ส่งค่าซ้ำๆ

ป้องกันคลิก ส่งค่าซ้ำๆ

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 มีปุ่มอยู่

เห็นไหมครับ ว่ามันง่ายนิดเดียว

Create: Modify : 2010-04-23 00:16:28 Read : 6796 URL :