Verhindern doppelter Übermittlungen in AEM Adaptive Forms mit Dateianlagen
In diesem Artikel wird beschrieben, wie Sie verhindern können, dass Benutzende AEM Adaptive Forms mehrmals senden, indem Sie die Schaltfläche Senden während der Verarbeitung deaktivieren, insbesondere wenn Dateianhänge betroffen sind.
Beschreibung description
Umgebung
Adobe Experience Manager (AEM) Adaptive Forms (alle Versionen)
Problem/Symptome
Benutzer können dasselbe adaptive Formular mehrmals senden, indem sie wiederholt auf die Schaltfläche Senden klicken, insbesondere während Dateianhänge hochgeladen werden oder das Formular verarbeitet wird. Dies kann zu doppelten Übermittlungen und unbeabsichtigter Datenverarbeitung führen.
Ursache
AEM Forms Foundation-Komponenten bieten keine vordefinierte Funktion, um doppelte Übermittlungen zu verhindern. Kernkomponenten für adaptive Forms enthalten eine integrierte Logik zum Deaktivieren der Senden-Schaltfläche während der Übermittlung, dies ist jedoch in Foundation-Komponenten nicht verfügbar.
Lösung resolution
Führen Sie zur Behebung des Problems folgende Schritte aus:
-
Identifizieren Sie den Komponententyp, der in Ihrem adaptiven Formular verwendet wird:
- Wenn Sie AEM Forms Foundation-Komponenten verwenden, fahren Sie mit Schritt 2 fort.
- Wenn Sie AEM-Kernkomponenten für adaptives Forms verwenden, siehe Schritt 4.
-
Für Foundation-Komponenten (keine standardmäßige Vermeidung von Duplikaten bei der Übermittlung):
- Implementieren Sie eine Client-seitige Anpassung, um die Senden-Schaltfläche nach dem ersten Klick oder nach erfolgreicher Validierung zu deaktivieren.
- Beispiel JavaScript zur Deaktivierung der Senden-Schaltfläche:
code language-none document.addEventListener('DOMContentLoaded', function() { var submitBtn = document.querySelector('button[ type="submit"] '); if (submitBtn) { submitBtn.addEventListener('click', function(e) { // Optionally, add validation check here submitBtn.disabled = true; // Optionally, show a loading spinner or message }); } });- Testen Sie das Formular gründlich, insbesondere mit Dateianlagen, um sicherzustellen, dass die Senden-Schaltfläche deaktiviert bleibt, bis die Verarbeitung abgeschlossen ist.
-
Implementieren Sie optional eine Backend-Logik, um doppelte Übermittlungen basierend auf eindeutigen Kennungen oder Sitzungs-Token zu erkennen und abzulehnen.
-
Für Kernkomponenten (Vermeidung von Übermittlungsduplikaten standardmäßig):
- Aktualisieren Sie auf oder verwenden Sie AEM-Kernkomponenten für adaptive Forms, falls diese noch nicht verwendet werden.
- Kernkomponenten deaktivieren die Senden-Schaltfläche nach der Validierung und während der Übermittlung automatisch, um doppelte Übermittlungen zu verhindern.
-
Geben Sie bei der Formularverarbeitung immer Benutzer-Feedback (z. B. beim Laden eines Spinners oder einer Nachricht), um wiederholte Klicks zu verhindern.
-
Testen Sie nach der Implementierung der Lösung das Formular, indem Sie beim Hochladen oder Verarbeiten der Datei mehrmals auf Senden klicken. Die Schaltfläche sollte nach dem ersten Klicken deaktiviert werden und nur eine Übermittlung sollte verarbeitet werden.