Heim >Web-Frontend >js-Tutorial >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!