Prevent duplicate submissions in AEM Adaptive Forms with file attachments

This article describes how to prevent users from submitting AEM Adaptive Forms multiple times by disabling the Submit button during processing, particularly when file attachments are involved.

Description description

Environment

Adobe Experience Manager (AEM) Adaptive Forms (all versions)

Issue/Symptoms

Users can submit the same Adaptive Form multiple times by clicking the Submit button repeatedly, especially while file attachments are uploading or the form is processing. This may result in duplicate submissions and unintended data processing.

Cause

AEM Forms Foundation Components do not provide an out-of-the-box feature to prevent duplicate submissions. Core Components for Adaptive Forms include built-in logic to disable the Submit button during submission, but this is not available in Foundation Components.

Resolution resolution

Follow the steps to resolve the issue:

  1. Identify the component type used in your Adaptive Form:

    • If you are using AEM Forms Foundation Components, proceed to step 2.
    • If you are using AEM Core Components for Adaptive Forms, see step 4.
  2. For Foundation Components (no out-of-the-box duplicate submission prevention):

    • Implement client-side customization to disable the Submit button after the first click or once validation passes.
    • Example JavaScript to disable the Submit button:
    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
            });
        }
    });
    
    • Test the form thoroughly, especially with file attachments, to ensure the Submit button remains disabled until processing completes.
  3. Optionally, implement backend logic to detect and reject duplicate submissions based on unique identifiers or session tokens.

  4. For Core Components (out-of-the-box duplicate submission prevention):

    • Upgrade to or use AEM Core Components for Adaptive Forms if not already in use.
    • Core Components automatically disable the Submit button after validation and during submission, preventing duplicate submissions.
  5. Always provide user feedback (such as a loading spinner or message) when the form is processing to discourage repeated clicks.

  6. After implementing the solution, test the form by attempting to click Submit multiple times during file upload or processing. The button should be disabled after the first click, and only one submission should be processed.

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