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

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!