Podejście czasowe jest złe - skąd wiesz, jak długo potrwa akcja na przeglądarce klienta?

Jak to zrobić

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

Gdy formularz zostanie przesłany, wyłączy wszystkie przyciski Wyślij w środku.

Pamiętaj, że w Firefoksie po wyłączeniu przycisku stan ten zostanie zapamiętany po cofnięciu się do historii. Aby temu zapobiec, musisz na przykład włączyć przyciski podczas ładowania strony.

Myślę, że odpowiedź Nathana Longa jest właściwą drogą. Dla mnie używam walidacji po stronie klienta, więc dodałem tylko warunek, że formularz będzie ważny.

EDIT: jeśli nie zostanie to dodane, użytkownik nigdy nie będzie mógł przesłać formularza, jeśli Walidacja po stronie klienta napotka błąd.

        // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                var $form = $(this);

                if ($form.data('submitted') === true) {
                    // Previously submitted - don't submit again
                    alert('Form already submitted. Please wait.');
                    e.preventDefault();
                } else {
                    // Mark it so that the next submit can be ignored
                    // ADDED requirement that form be valid
                    if($form.valid()) {
                        $form.data('submitted', true);
                    }
                }
            });

            // Keep chainability
            return this;
        };

event.timeStamp nie działa w Firefoksie. Zwracanie false jest niestandardowe, należy wywołać event.preventDefault(). A skoro już o tym mowa, Zawsze używaj szelek z konstrukcją kontrolną .

Podsumowując wszystkie poprzednie odpowiedzi, oto wtyczka, która wykonuje zadanie i działa między przeglądarkami.

jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};

W odniesieniu do Kern3l, metoda pomiaru czasu działa dla mnie po prostu dlatego, że próbujemy zatrzymać podwójne kliknięcie przycisku Wyślij. Jeśli masz bardzo długi czas odpowiedzi na zgłoszenie, ja zaleca się zastąpienie przycisku Wyślij lub formularza spinnerem.

Całkowite zablokowanie kolejnych przesłań formularza, jak większość powyższych przykładów, ma jeden zły efekt uboczny: jeśli wystąpi awaria sieci i chcą spróbować ponownie przesłać, nie będą w stanie tego zrobić i utracą wprowadzone zmiany. To na pewno zrobi z Ciebie wściekłego użytkownika.

Proszę sprawdzić jQuery-safeform plugin.

Przykład użycia:

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

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

...ale formularz nie jest przesyłany z dowolne dane postu, które ma include.

Zgadza się. Wyłączone nazwy/wartości elementów formularza nie będą wysyłane na serwer. Należy ustawić je jako readonly elementy.

Również kotwice nie mogą być wyłączone w ten sposób. Musisz albo usunąć ich href (niezalecane), albo zapobiec ich domyślnemu zachowaniu( lepszy sposób), np.:

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

Istnieje możliwość poprawy podejścia Nathana Longa . Możesz zastąpić logikę wykrywania już przesłanego formularza tą:

var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else

Kod Nathana ale dla wtyczki jQuery Validate

Jeśli zdarzy ci się użyć wtyczki jQuery Validate, mają już zaimplementowaną obsługę przesyłania, a w takim przypadku nie ma powodu, aby zaimplementować więcej niż jeden. Kod:

jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});

Możesz go łatwo rozwinąć w } else {-block, aby wyłączyć wejścia i / lub przycisk Wyślij.

Cheers

W końcu wykorzystałem pomysły z tego postu, aby wymyślić rozwiązanie, które jest dość podobne do wersji AtZako.

 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};

Używając TAK:

$('#my-form').preventDoubleSubmission();

Odkryłem, że rozwiązania, które nie zawierały pewnego rodzaju limitu czasu, ale tylko wyłączone przesyłanie lub wyłączone Elementy formularza, powodowały problemy, ponieważ po uruchomieniu blokady nie można przesłać ponownie, dopóki nie odświeżysz strony. To powoduje pewne problemy dla mnie podczas robienia rzeczy ajax.

To może być chyba prettied trochę w górę, bo to nie Takie fantazyjne.

Jeśli używasz AJAX do wysłania formularza, set async: false powinien zapobiegać dodatkowym przesłaniom przed wyczyszczeniem formularza:

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

Zmodyfikowano nieco rozwiązanie Nathana dla Bootstrap 3. Spowoduje to ustawienie tekstu wczytywania do przycisku Wyślij. Dodatkowo po upływie 30 sekund formularz zostanie ponownie przesłany.

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

Użyj dwóch przycisków wyślij.

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

I jQuery:

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

Miałem podobne problemy i moje rozwiązanie(y) są następujące.

Jeśli nie masz walidacji po stronie klienta, możesz po prostu użyć metody jquery one (), jak to tutaj udokumentowano.

Http://api.jquery.com/one/

To wyłącza funkcję obsługi po jej wywołaniu.

$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});

Jeśli robisz walidację po stronie klienta, tak jak ja, to jest to nieco bardziej skomplikowane. Powyższy przykład nie pozwoli Ci przesłać ponownie po nieudanej walidacji. Spróbuj tego. podejście zamiast

$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});

Oto Jak to robię:

$(document).ready(function () {
  $('.class_name').click(function () {
    $(this).parent().append('<img src="data:image/gif;base64,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" />');
    $(this).hide();
  });
});

Napisy: https://github.com/phpawy/jquery-submit-once

Ten kod wyświetli ładowanie na etykiecie przycisku i ustaw przycisk na

Wyłącz stan, a następnie po przetworzeniu ponownie włącz i zwróć oryginalny tekst przycisku * *

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
}

);

Moje rozwiązanie:

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};

W moim przypadku formularz onsubmit miał jakiś kod weryfikacyjny, więc zwiększam Nathan Long odpowiedź łącznie z punktem kontrolnym onsubmit

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        if ($form.data('submitted') === true) {
            /*Previously submitted - don't submit again */
            e.preventDefault();
        } else {
          /*Mark it so that the next submit can be ignored*/
          $form.data('submitted', true);
        }
      });

      /*Keep chainability*/
      return this;
    };

Zmień przycisk submit:

<input id="submitButtonId" type="submit" value="Delete" />

Z normalnym przyciskiem:

<input id="submitButtonId" type="button" value="Delete" />

Następnie użyj funkcji click:

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

I pamiętaj, aby ponownie włączyć przycisk, gdy jest konieczne:

$('#submitButtonId').prop('disabled', false);

Użyj prostego licznika przy wysyłaniu.

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

I wywołanie funkcji monitor() Podczas przesyłania formularza.

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

Rozwiązałem bardzo podobny problem używając:

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});