Butonu 1 kere post ettirme
Php'de post ederken arka tarafta herhangi bir kontrol sağlamazsak butona birden fazla basıldığı zaman aynı veri çok fazla giriş yapabiliyor. Bu durumun nasıl önüne geçebilirim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (6)
Ajax ile post etmekten bahsediyorsanız şöyle bir örnek vereyim:
<form id="userForm">
<input id="username" type="text" value="mek" />
<button>Gönder</button>
</form>
İçinde sadece 1 input olan formumuzu ajax ile post etmek istiyoruz.
var $userForm = $("#userForm");
var $usernameInput = $userForm.find("#username");
$userForm.on("submit", function(e) {
e.preventDefault(); // formun direkt gönderilmesini engelliyoruz.
if($userForm.hasClass("waiting")) return; // Eğer formda "waiting" adında bir class varsa hiçbir işlem yapılmasın.
if($usernameInput.val().trim()==="") { alert("Kullanıcı adı zorunludur!"); return; } // Kullanıcı adı boş gönderilemesin.
$userForm.addClass("waiting"); // artık ajax isteğinden sonuç bekleyeceğimiz için forma "waiting" class'ını ekleyebiliriz.
var username = $usernameInput.val().trim();
$.ajax({
url: "add_user.php",
type:"post",
data: { username: username },
success:function(response) {
// Örnek olarak gelen yanıta göre işlemler yapıyorum:
if(response.type==="error") alert(response.errorMessage);
else if(response.type==="success") {
alert(username+" adlı kullanıcı başarıyla eklendi.");
$usernameInput.val("");
}
else alert("Bilinmeyen bir sonuç döndü.");
// Artık yanıttan cevap döndüğüne göre formu "waiting" class'ından arındıralım.
$userForm.removeClass("waiting");
},
error: function() {
alert("Bir sorunla karşılaşıldı.");
$userForm.removeClass("waiting");
}
});
});
Böylece, form ajax ile submit edilirken yanıt dönene kadar form'a "waiting" class'ı atamış olduk. Butona tıklandığında da eğer formda "waiting" class'ı varsa işlem yapmamasını söyledik. Artık kullanıcı firebug üzerinden kodla müdahale etmediği sürece tekrar tekrar butona tıklanmasının bir anlamı olmayacak. Biz yine de CSS yardımıyla da butona basılmasını önleyelim.
* { margin:0; padding:0; box-sizing:border-box; outline:none; }
#userForm { display:flex; flex-direction:row; align-items:center; justify-content:center; }
#userForm #username { width:100px; height:30px; text-indent:10px; border:1px solid #777; border-radius:5px 0 0 5px; }
#userForm button { width:80px; height:30px; border:1px solid #777; background-color:#ccc; border-radius:0 5px 5px 0; border-left:none; transition:color ease .3s, background-color ease .3s; }
/* #userForm eğer .waiting class'ına sahipse butona tıklanamasın: */
#userForm.waiting button { pointer-events: none; background-color:#eee; color:#aaa; }
Yine waiting class'ının varlığına göre farklı stiller (loading gif'i göstermek gibi) yapılabilir.