Formun müşteri tarafından birden çok kez gönderilmesi nasıl engellenir?

Bazen yanıt yavaş olduğunda, gönder düğmesine birden çok kez tıklanabilir.

Bunun olmasını nasıl önleyebilirim?

Zaten gönderildikten sonra formdaki gönderme olayını devre dışı bırakmak için göze çarpmayan javascript kullanın. İşte jQuery kullanan bir örnek.

DÜZENLEME: Gönder düğmesini tıklamadan form göndermeyle ilgili sorun düzeltildi. Teşekkürler ichiban.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Vanstee'nin çözümünü asp mvc 3 göze batmayan doğrulama ile birlikte denedim ve istemci doğrulaması başarısız olursa, kod hala çalışıyor ve form gönderme tamamen devre dışı bırakılıyor. Alanları düzelttikten sonra yeniden gönderemiyorum. (bjan'ın yorumuna bakın)

Ben de vanstee'nin senaryosunu şu şekilde değiştirdim:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

İstemci tarafı form gönderme kontrolü, onsubmit işleyicisinin gönder düğmesini gizlemesi ve onu bir yükleme animasyonuyla değiştirmesiyle oldukça zarif bir şekilde elde edilebilir. Bu şekilde kullanıcı, eyleminin (tıklama) gerçekleştiği noktada anında görsel geri bildirim alır. Aynı zamanda formun başka bir zaman gönderilmesini engellersiniz.

Formu XHR aracılığıyla gönderirseniz, zaman aşımı gibi gönderim hatalarını da işlemeniz gerektiğini unutmayın. Kullanıcının formu yeniden göndermesi gerektiğinden gönder düğmesini tekrar görüntülemeniz gerekir .

Bir başka kayda göre, llimllib çok geçerli bir noktayı ortaya koyuyor. Tüm form doğrulaması sunucu tarafında yapılmalıdır. Bu, birden çok gönderim kontrolünü içerir. Müşteriye asla güvenme! Bu sadece javascript devre dışı bırakıldığında bir durum değildir. Tüm istemci tarafı kodunun değiştirilebileceğini unutmamalısınız. Hayal etmesi biraz zor ama sunucunuzla konuşan html / javascript, yazdığınız html / javascript olmayabilir.

Llimllib'in önerdiği gibi, formu o form için benzersiz olan bir tanımlayıcıyla oluşturun ve gizli bir giriş alanına koyun. Bu tanımlayıcıyı saklayın. Form verilerini alırken, yalnızca tanımlayıcı eşleştiğinde işleyin. (Ayrıca ek güvenlik için tanımlayıcının kullanıcı oturumuna bağlanması ve bununla eşleştirilmesi.) Veri işlemeden sonra tanımlayıcıyı silin.

Elbette, ara sıra hiçbir form verisi gönderilmeyen tanımlayıcıları temizlemeniz gerekir. Ancak büyük olasılıkla web siteniz zaten bir tür "çöp toplama" mekanizması kullanıyor.

<form onsubmit="if(submitted) return false; submitted = true; return true">

İşte bunu yapmanın basit yolu:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Bir tıklamanın hemen ardından gönder düğmesini devre dışı bırakın. Doğrulamaları doğru şekilde yaptığınızdan emin olun. Ayrıca tüm işleme veya DB işlemleri için bir ara sayfa tutun ve ardından sonraki sayfaya yönlendirin. Bu, ikinci sayfayı yenilemenin başka bir işlem yapmamasını sağlar.

Geçerli saati karma haline getirin, formda gizli bir giriş yapın. Sunucu tarafında, her form gönderiminin karmasını kontrol edin; Bu hash'i zaten aldıysanız, tekrar gönderiminiz olur.

düzenleme: javascript'e güvenmek iyi bir fikir değildir, bu nedenle hepiniz bu fikirleri yükseltmeye devam edebilirsiniz, ancak bazı kullanıcılar bunu etkinleştirmeyecektir. Doğru cevap, sunucu tarafındaki kullanıcı girişine güvenilmemektir.

Formun işlendiğini belirtmek için bir ilerleme çubuğu veya değer değiştirici de görüntüleyebilirsiniz.

JQuery kullanarak şunları yapabilirsiniz:

$('input:submit').click( function() { this.disabled = true } );

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Sorunuzu 'javascript' ile etiketlediğinizi biliyorum ama işte javascript'e hiç bağlı olmayan bir çözüm:

PRG adlı bir web uygulaması kalıbı ve işte onu açıklayan iyi bir makale

Birden fazla gönderimi basitçe şu şekilde engelleyebilirsiniz:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Bu soruya verilen en basit cevap: "Bazen yanıt yavaş olduğunda gönder düğmesine birden çok kez tıklanabilir. Bunun olmasını nasıl önleyebilirim?"

Aşağıdaki kod gibi form gönderme düğmesini devre dışı bırakmanız yeterlidir.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Göndermek için ilk tıklamada gönder düğmesini devre dışı bırakacaktır. Ayrıca bazı doğrulama kurallarınız varsa, o zaman iyi çalışacaktır. Umarım yardımcı olur.

İstemci tarafında , @vanstee ve @chaos tarafından sağlanan yöntem gibi javascript kodu ile form gönderildikten sonra gönder düğmesini devre dışı bırakmalısınız.

Ancak, bunun olmasını önlemek için JS'ye güvenmemeniz gereken ağ gecikmesi veya javascript devre dışı durumuyla ilgili bir sorun var.

Bu nedenle, sunucu tarafında , aynı istemcilerden tekrarlanan gönderimi kontrol etmeli ve kullanıcıdan yanlış bir girişim gibi görünen tekrarlanan gönderimi atlamalısınız.

Safeform jquery eklentisini deneyebilirsiniz .

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

Benim için en basit ve zarif çözüm:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Daha fazlası için bağlantı ...

Bu kodu formunuzda kullanın. Birden çok tıklama işleyecektir.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

kesinlikle işe yarayacak.

Bu, her 2 saniyede bir gönderime izin verir. Ön doğrulama durumunda.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

Birden fazla kişinin gönderilmesini önlemenin en iyi yolu, bu yöntemdeki düğme kimliğini iletmektir.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Bunu javascript kullanarak yapmak biraz kolaydır. İstenilen işlevselliği sağlayacak kod aşağıdadır:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

En basit çözüm, tıklamadaki düğmeyi devre dışı bırakmak, işlem tamamlandıktan sonra etkinleştirmektir. Jsfiddle'da benzer çözümü kontrol etmek için:

[click here][1]

Ve bu cevapla ilgili başka bir çözüm bulabilirsiniz .

Bu benim için çok iyi çalışıyor. Çiftliği gönderin ve düğmeyi devre dışı bırakın ve 2 saniye sonra düğmeyi etkinleştirin.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

ECMA6 Syntex'te

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

Tarayıcı giriş doğrulamasını atlamadan olası yanıtlara eklemek için

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Daha önce önerilenlere bir alternatif şudur:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});