So verhindern Sie doppelte Formularübermittlungen in jQuery: Welche Techniken funktionieren am besten?

So verhindern Sie doppelte Formularübermittlungen in jQuery

Wenn Sie mit Formularen arbeiten, deren Verarbeitung viel Zeit in Anspruch nimmt, wird verhindert, dass Benutzer versehentlich Formulare einreichen Das mehrmalige Absenden des Formulars ist von entscheidender Bedeutung. In diesem Artikel wird eine Methode beschrieben, um dies mit jQuery zu erreichen.

Erster Versuch

Der erste Ansatz bestand darin, alle Eingaben und Schaltflächen bei der Formularübermittlung zu deaktivieren. Diese Technik führte jedoch dazu, dass das Formular nicht in Firefox gesendet wurde.

Verbesserte Lösung

Die Lösung besteht darin, nur die Senden-Schaltflächen selektiv zu deaktivieren, da dies möglicherweise bei der Deaktivierung aller Eingaben der Fall ist die Übermittlung des Formulars beeinträchtigen. Dies wird durch den folgenden jQuery-Code erreicht:

$('button[type=submit], input[type=submit]').prop('disabled', true);

Alternativer Plugin-Ansatz

Eine weitere Option ist die Verwendung des folgenden jQuery-Plugins, das die data()-Funktion von jQuery zum Markieren nutzt Formulare in der übermittelten Form, wodurch spätere Übermittlungen verhindert werden.

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

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });

  return this;
};

Verwendung:

$('form').preventDoubleSubmission();

Ausgenommen AJAX-Formulare

Wenn Ihre Anwendung AJAX-Formulare enthält Sollte mehrere Einreichungen zulassen, können Sie diese ausschließen, indem Sie eine Klasse hinzufügen, wie unten gezeigt:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

Das obige ist der detaillierte Inhalt vonSo verhindern Sie doppelte Formularübermittlungen in jQuery: Welche Techniken funktionieren am besten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!