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:

  1. 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.
  2. 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.
  3. Implementieren Sie optional eine Backend-Logik, um doppelte Übermittlungen basierend auf eindeutigen Kennungen oder Sitzungs-Token zu erkennen und abzulehnen.

  4. 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.
  5. Geben Sie bei der Formularverarbeitung immer Benutzer-Feedback (z. B. beim Laden eines Spinners oder einer Nachricht), um wiederholte Klicks zu verhindern.

  6. 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.

recommendation-more-help
experience-cloud-kcs-help-kbarticles