Czasami, gdy odpowiedź jest powolna, można wielokrotnie kliknąć przycisk przesyłania.
Jak temu zapobiec?
javascript
submit
o mój Boże
źródło
źródło
Odpowiedzi:
Użyj dyskretnego javascript, aby wyłączyć zdarzenie przesyłania w formularzu po jego już przesłaniu. Oto przykład użycia jQuery.
EDYCJA: Naprawiono problem z przesyłaniem formularza bez klikania przycisku przesyłania. Dzięki, ichibanie.
źródło
return true
? Myślę, że pierwsze zgłoszenie powinno działać bez tego.return true
jest to domniemane, jeśli zostanie pominięte.$(this).find("input[type='submit']").attr('disabled', 'disabled').val('submiting'); return true; });
Wypróbowałem rozwiązanie Vanstee wraz z dyskretną walidacją asp mvc 3, a jeśli walidacja klienta się nie powiedzie, kod jest nadal uruchamiany, a przesyłanie formularzy jest wyłączone na dobre. Nie mogę przesłać ponownie po poprawieniu pól. (patrz komentarz bjan)
Więc zmodyfikowałem skrypt vanstee w ten sposób:
źródło
Kontrolę przesyłania formularzy po stronie klienta można osiągnąć całkiem elegancko, jeśli program obsługi onsubmit ukryje przycisk przesyłania i zastąpi go animacją ładowania. W ten sposób użytkownik otrzymuje natychmiastową wizualną informację zwrotną w tym samym miejscu, w którym miało miejsce jego działanie (kliknięcie). Jednocześnie uniemożliwiasz przesłanie formularza innym razem.
Jeśli przesyłasz formularz przez XHR, pamiętaj, że musisz również zająć się błędami przesyłania, na przykład przekroczeniem limitu czasu. Musiałbyś ponownie wyświetlić przycisk przesyłania, ponieważ użytkownik musi ponownie przesłać formularz.
Z drugiej strony llimllib przedstawia bardzo ważny punkt. Cała weryfikacja formularza musi odbywać się po stronie serwera. Obejmuje to wielokrotne sprawdzanie przedłożenia. Nigdy nie ufaj klientowi! Dzieje się tak nie tylko w przypadku wyłączenia javascript. Należy pamiętać, że cały kod po stronie klienta można modyfikować. Trudno to sobie wyobrazić, ale html / javascript komunikujący się z serwerem niekoniecznie musi być napisanym przez Ciebie html / javascript.
Jak sugeruje llimllib, wygeneruj formularz z identyfikatorem, który jest unikalny dla tego formularza i umieść go w ukrytym polu wejściowym. Przechowuj ten identyfikator. Podczas otrzymywania danych formularza przetwarzaj je tylko wtedy, gdy identyfikator jest zgodny. (Również łączenie identyfikatora z sesją użytkownika i dopasowywanie go również dla dodatkowego bezpieczeństwa). Po przetworzeniu danych usuń identyfikator.
Oczywiście od czasu do czasu musiałbyś wyczyścić identyfikatory, dla których nigdy nie przesłano żadnych danych formularza. Ale najprawdopodobniej Twoja witryna już wykorzystuje jakiś mechanizm „zbierania śmieci”.
źródło
źródło
<form onsubmit="return (typeof submitted == 'undefined') ? (submitted = true) : !submitted">
lub zapisuvar submitted = false;
w odpowiednim momencie swojego skryptu, aby uniknąć następujący błąd:Uncaught ReferenceError: submitted is not defined
.Oto prosty sposób, aby to zrobić:
źródło
Wyłącz przycisk przesyłania wkrótce po kliknięciu. Upewnij się, że poprawnie obsługujesz walidacje. Zachowaj również stronę pośrednią dla wszystkich operacji przetwarzania lub operacji DB, a następnie przekieruj do następnej strony. Daje to pewność, że odświeżenie drugiej strony nie spowoduje kolejnego przetwarzania.
źródło
form page ---submits to---> form_submission_script.php ---after saving, redirects to---> form_thankyou.html
Hasz bieżący czas, uczyń go ukrytym wejściem w formularzu. Po stronie serwera sprawdź hash każdego przesłanego formularza; jeśli już otrzymałeś ten hash, masz powtórne przesłanie.
edycja: poleganie na javascript nie jest dobrym pomysłem, więc wszyscy możecie dalej głosować za tymi pomysłami, ale niektórzy użytkownicy nie będą mieli włączonej opcji. Prawidłowa odpowiedź brzmi: nie ufaj wejściom użytkownika po stronie serwera.
źródło
Możesz również wyświetlić pasek postępu lub pokrętło, aby wskazać, że formularz jest przetwarzany.
źródło
Za pomocą JQuery możesz:
&
źródło
Wiem, że oznaczyłeś swoje pytanie tagiem „javascript”, ale oto rozwiązanie, które w ogóle nie zależy od javascript:
Jest to wzorzec aplikacji internetowej o nazwie PRG , a oto dobry artykuł, który go opisuje
źródło
Aby zapobiec wielokrotnemu przesyłaniu, wystarczy:
źródło
Workin =true;
. Podwójne przesyłanie jest nadal możliwe, ale prawdopodobnie jest ich mniej.Najprostsza odpowiedź na to pytanie: „Czasami, gdy odpowiedź jest powolna, można kilka razy kliknąć przycisk przesyłania. Jak temu zapobiec?”
Po prostu wyłącz przycisk przesyłania formularza, jak w poniższym kodzie.
Spowoduje to wyłączenie przycisku przesyłania po pierwszym kliknięciu w celu przesłania. Również jeśli masz jakieś reguły walidacji, to będzie działać dobrze. Mam nadzieję, że to pomoże.
źródło
Po stronie klienta należy wyłączyć przycisk przesyłania po przesłaniu formularza z kodem javascript, tak jak w przypadku metody dostarczonej przez @vanstee i @chaos.
Ale istnieje problem z opóźnieniem sieci lub sytuacją z wyłączoną obsługą javascript, w której nie powinieneś polegać na JS, aby temu zapobiec.
Tak więc po stronie serwera należy sprawdzić powtórne przesłanie od tych samych klientów i pominąć powtórzone, które wydaje się fałszywą próbą użytkownika.
źródło
Możesz wypróbować wtyczkę safeform jquery.
źródło
Najprostsze i eleganckie rozwiązanie dla mnie:
Link po więcej ...
źródło
Użyj tego kodu w swoim formularzu. Obsłuży wiele kliknięć.
to na pewno zadziała.
źródło
Umożliwia to przesyłanie co 2 sekundy. W przypadku walidacji z przodu.
źródło
Najlepszym sposobem na uniknięcie przesyłania wielokrotnych jest po prostu przekazanie identyfikatora przycisku w metodzie.
źródło
Aby to zrobić za pomocą javascript jest trochę łatwe. Poniżej znajduje się kod, który zapewni pożądaną funkcjonalność:
źródło
Najprostszym rozwiązaniem jest wyłączenie przycisku po kliknięciu i włączenie go po zakończeniu operacji. Aby sprawdzić podobne rozwiązanie na jsfiddle:
W tej odpowiedzi możesz znaleźć inne rozwiązanie .
źródło
U mnie to działa bardzo dobrze. Podaje farmę i wyłącza przycisk, a po 2 sekundach aktywuje przycisk.
W ECMA6 Syntex
źródło
Wystarczy dodać do możliwych odpowiedzi bez pomijania sprawdzania poprawności danych wejściowych przeglądarki
źródło
Alternatywą dla tego, co zaproponowano wcześniej, jest:
źródło