it-swarm.com.de

So verhindern Sie, dass Benutzer zweimal ein Formular senden

<input type="submit" name="btnADD" id="btnADD" value="ADD"/>

wenn der Benutzer zweimal auf die Schaltfläche "Hinzufügen" klickt, wird zweimal mit den gleichen Daten in die Tabelle gesendet.

14
user2431273

probiere diesen Code aus ..

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
17
Vijay

Fügen Sie nach dem Senden des Formulars einen Handler mit jQuery hinzu, der den übergebenden Handler entführt und "deaktiviert":

var $myForm = $("#my_form");
$myForm.submit(function(){
    $myForm.submit(function(){
        return false;
    });
});

Die Rückgabe von "false" vom Submit-Handler verhindert, dass das Formular gesendet wird. Das Deaktivieren von Schaltflächen kann merkwürdige Auswirkungen auf die Behandlung des Formulars haben. Dieser Ansatz scheint im Wesentlichen keine Nebenwirkungen zu haben, und funktioniert sogar bei Formularen mit mehreren Senden-Schaltflächen.

24
rogueleaderr

Sie können die Schaltfläche nach dem Klicken deaktivieren oder ausblenden.

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>

js:

 function disableButton(button) {
     button.disabled = true;
     button.value = "submitting...."
     button.form.submit();
}
4
mlwacosmos

Wenn Sie mit Java-serverseitigem Scripting arbeiten und auch Struts 2 verwenden, verweisen Sie auf diesen Link, der über die Verwendung von Token spricht.

http://www.xinotes.org/notes/note/369/

Ein Token sollte generiert werden und für die anfängliche Seitenwiedergabe in Sitzung bleiben, wenn die Anforderung zum ersten Mal zusammen mit dem Token übergeben wird. Führen Sie in struts action einen Thread mit dem Threadnamen als Token-ID aus und führen Sie die Logik aus, was immer der Client hat angefordert, wenn der Client die gleiche Anforderung erneut sendet, prüfen Sie, ob der Thread noch läuft (thread.getcurrentthread (). unterbrochen), wenn er noch läuft, und senden Sie dann eine Clientumleitung 503.

Und wenn Sie kein Framework verwenden und nach einem einfachen Training suchen . Sie können Hilfe von der 

Java.util.UUID.randomUUID();

Fügen Sie die zufällige Uuid einfach in die Sitzung und auch in ein ausgeblendetes Formularfeld ein und auf der anderen Seite (die JSP-Seite, auf der Sie andere Aufgaben wie das Speichern von Daten in einer Datenbank usw. ausführen). Nehmen Sie die UUID aus dem Sitzungs- und ausgeblendeten Formularfeld heraus Fahren Sie dann fort, entfernen Sie uuid aus der Sitzung und wenn nicht, ist es möglich, dass das Formular erneut übermittelt wurde. 

Für Ihre Hilfe schreibe ich ein Code-Snippet, um eine Vorstellung davon zu bekommen, wie man das Ding erreichen kann.

<%
String formId=(Java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>
3
foxt7ot

Sie können den Benutzer darüber informieren, dass er zu viel Kaffee trinkt, aber am besten deaktivieren Sie den Button mit Javascript, zum Beispiel so:

$("#btnADD").on('click', function(btn) {
  btn.disabled = true;
});
3
scraaappy

Ich habe eine Lösung basierend auf der Antwort von Rogueleaderr gemacht:

jQuery('form').submit(function(){
    jQuery(this).unbind('submit'); // unbind this submit handler first and ...
    jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
        return false;
    });
    console.log('submitting form'); // only for testing purposes
});
2
berosoboy

Sie können Ihrem Formular und Ihrem Submit-Button eine Klasse hinzufügen und Jquery verwenden:

$(function() {

    // prevent the submit button to be pressed twice
    $(".createForm").submit(function() {
        $(this).find('.submit').attr('disabled', true);
        $(this).find('.submit').text('Sending, please wait...');
    });
})

1
FelipeOliveira

Erstellen Sie eine Klasse für das Formular. In meinem Fall habe ich verwendet: _submitlock

$(document).ready(function () {
  $(document).on('submit', '._submitlock', function (event) {

      // Check if the form has already been submitted
      if (!$(this).hasClass('_submitted')) {
          // Mark the form as submitted
          $(this).addClass('_submitted');

          // Update the attributes of the submit buttons
          $(this).find('[type="submit"]').attr('disabled', 'disabled');
          // Add classes required to visually change the state of the button
          $(this).find('[type="submit"]').addClass("buttoninactive");
          $(this).find('[type="submit"]').removeClass("buttonactive");

      } else {
          // Prevent the submit from occurring.
          event.preventDefault();
      }

  });});
1
Campinho

Wenn der Benutzer auf die Schaltfläche "Senden" klickt, deaktivieren Sie diese Schaltfläche.

<form onSubmit="disable()"></form>

function disable()
{
     document.getElementById('submitBtn').disabled = true;
    //SUBMIT HERE
}
1
PSR

Sie können JavaScript verwenden.

Hängen Sie form.submit.disabled = true; an das onsubmit-Ereignis des Formulars an.

Ein versierter Benutzer kann ihn umgehen, sollte jedoch 99% der Benutzer daran hindern, zweimal zu senden.

1
surfitscrollit

Sie können eine erfolgreiche Nachricht mit einem Popup mit der Schaltfläche OK anzeigen, wenn Sie auf OK klicken, um sie an eine andere Stelle umzuleiten 

1
smk

Deaktivieren Sie die Schaltfläche "Senden" 

$('#btnADD').attr('disabled','disabled');

      or

$('#btnADD').attr('disabled','true');
1
Janak

Meine Lösung für ein ähnliches Problem bestand darin, eine separate, versteckte Schaltfläche zum Senden zu erstellen. Das funktioniert so:

  • Sie klicken auf die erste sichtbare Schaltfläche.
  • Die erste Schaltfläche ist deaktiviert.
  • Die Variable onclick bewirkt, dass der zweite Submit-Button gedrückt wird.
  • Das Formular wird übermittelt.
<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>

Ich bin diesen Weg nur aus Gründen der Klarheit für andere, die an dem Code arbeiten, gegangen. Es gibt andere Lösungen, die subjektiv besser sein können.

1
Bryant Jackson

Fügen Sie dem Formular beim Senden eine Klasse hinzu, wodurch ein Doppelklick/Senden eines Benutzers gestoppt wird

$('form[method=post]').each(function(){
   $(this).submit(function(form_submission) {
     if($(form_submission.target).attr('data-submitted')){
        form_submission.preventDefault();
     }else{
        $(form_submission.target).attr('data-submitted', true);
     }
  });
});
0
Planty

Dies ist eine alte Frage, aber ich hatte ein Problem mit meinem Formular, das hier keine Antwort hat, und dachte, dass es nützlich sein könnte, da ich vermute, dass es ein häufiges Problem ist.

Ich verwende jQuery validate für meine Formulare. Wenn der Benutzer versucht, das Formular abzusenden, die Front-End-Validierung jedoch das Senden des Formulars verhindert, ist die Schaltfläche "Abschicken" weiterhin deaktiviert, dh der Benutzer kann das Formular nicht senden.

Ich ging auf die großartige Antwort von Rogueleaderr ein und fügte eine kurze Überprüfung hinzu, um sicherzustellen, dass keine Front-End-Fehlermeldungen angezeigt wurden, bevor das erneute Senden des Formulars deaktiviert wurde:

<script>
$(document).ready(function () {
		var $myForm = $("#My-Form-Class");
		$myForm.submit(function(){
			if ($(".Front-End-Error-Class")[0]){
				console.log("Front End error messages are present - don't submit");
			}
			else{
				$myForm.submit(function(){
						return false;
				});
			}
		});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Es wird lediglich überprüft, ob auf dem Bildschirm keine Fehlerklassen angezeigt werden, bevor das Formular deaktiviert wird.

0
Conor Hughes

Setzen Sie eine Klasse auf alle Ihre Schaltflächen. Type = "submit" wie beispielsweise "button-disable-onsubmit" und verwenden Sie das jQuery-Skript wie folgt:

$(function(){
    $(".button-disable-onsubmit").click(function(){
         $(this).attr("disabled", "disabled");
         $(this).closest("form").submit();
    });
});

Denken Sie daran, diesen Code in einer generischen Javascript-Datei aufzubewahren, damit Sie ihn auf vielen Seiten verwenden können. So wird es zu einer eleganten und einfach wiederverwendbaren Lösung. Zusätzlich können Sie noch eine weitere Zeile hinzufügen, um den Textwert zu ändern:

$(this).val("Sending, please wait.");
0
Daniel Almeida