Heim >Web-Frontend >js-Tutorial >Wie verhindert man doppelte Formularübermittlungen in jQuery, ohne Formularelemente zu deaktivieren?

Wie verhindert man doppelte Formularübermittlungen in jQuery, ohne Formularelemente zu deaktivieren?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-08 16:51:02723Durchsuche

How to Prevent Double Form Submissions in jQuery Without Disabling Form Elements?

Doppelte Übermittlungen in Formularen mit jQuery verhindern

Benutzer übermitteln Formulare häufig versehentlich erneut, insbesondere wenn die Verarbeitung lange dauert. Um dies zu verhindern, kann jQuery verwendet werden, um Formularübermittlungen nach dem ersten Versuch zu deaktivieren. In einigen Fällen kann jedoch das Deaktivieren aller Formularelemente, einschließlich Eingaben, unbeabsichtigt die Übermittlung selbst verhindern.

Verbesserte Lösung mithilfe des jQuery-Plugins

Ein alternativer Ansatz ist die Verwendung ein jQuery-Plugin zur Verhinderung der doppelten Einreichung. Dieses Plugin nutzt die data()-Methode von jQuery, um Formulare als übermittelt zu markieren oder nicht.

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

    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;
};

Verwendung

Um dieses Plugin zu verwenden, fügen Sie es einfach mit $(' ein. form').preventDoubleSubmission();.

Zulässige AJAX-Formulare ausschließen

Wenn bestimmte Formulare (z. B. AJAX-Formulare) mehrfach übermittelt werden dürfen, ist dies möglich mithilfe von CSS-Klassen ausgeschlossen werden, wie im folgenden Beispiel zu sehen ist:

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

Mit dieser Methode können Formulare problemlos übermittelt werden, während versehentliche erneute Übermittlungen effektiv verhindert werden, was das Benutzererlebnis verbessert und potenziellen Datenverlust verhindert .

Das obige ist der detaillierte Inhalt vonWie verhindert man doppelte Formularübermittlungen in jQuery, ohne Formularelemente zu deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn