v2.5.2
Giriş yap

Butonu 1 kere post ettirme

mek
801 defa görüntülendi

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?

Cevap yaz
Cevaplar (6)
ebykdrms
972 gün önce

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.

mek
972 gün önce

Yanıtlarınız için gerçekten çok teşekkür ederim. Aklımdaki soruya; @ebykdrms hocam direkt yardımcı oldu. Sorunu çözdüm çok teşekkür ederim ihtiyacı olan aynı şekilde kullanabilir.

kartal
972 gün önce

Merhaba submit edildikten sonra butona bir loading class ekle daha sonra ajax işlemi bitince settimeout ile süre geciktir 3 5 saniye sonra butonun clasını eski halibe getir burada kullanıcı defalarca bassa dahi tek sorgu gidecektir.

mubado
972 gün önce

if ile bakabilir sonrada formu sıfırlayabilirsin ;
if($_POST){
// Verileri buraya yazabilirsin
}

admin
973 gün önce

butuna loadind ve disabled ozelligi eklersen 1 kez post olur.

munzevi
973 gün önce

veriyi kaydetmeden once ayni icerik varsa hata mesaji ver ve kaydetme