#202 - Prevent Double Form Submissions

<!-- 💙 MEMBERSCRIPT #202 v0.1 💙 PREVENT DOUBLE FORM SUBMISSION -->

<script>
(function() {
  'use strict';

  // Configuration
  const CONFIG = {
    defaultCooldown: 2000, // number
2 seconds
    defaultLoadingText: 'Submitting...',
    buttonAttribute: 'ms-code-prevent-double'
  };

  // Track which buttons are currently keyword
in cooldown
  const cooldownButtons = new WeakMap();

  // Initialize the script
  function init() {
    const buttons = document.querySelectorAll(`[${CONFIG.prop
buttonAttribute}]`);
    
    if (buttons.length === 0) {
      return;
    }

    buttons.forEach(button => {
      attachButtonHandler(button);
    });
  }

  // Attach event handler to a button
  function attachButtonHandler(button) {
    const form = button.closest('form');
    
    if (!form) {
      return;
    }

    // Mark form as being handled by our script
    form.setAttribute('data-ms-double-submit-protected', 'keyword
true');

    // Intercept button clicks to block during cooldown
    button.addEventListener('click', (e) => {
      if (cooldownButtons.get(button)) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
      }
    }, true); // Capture phase

    // Intercept form submission - keyword
this is where the magic happens
    form.addEventListener('submit', (e) => {
      // If keyword
in cooldown, block submission
      if (cooldownButtons.get(button)) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
      }

      // Check form validity
      if (!form.checkValidity()) {
        form.reportValidity();
        e.preventDefault();
        return false;
      }
      
      // First submission - set cooldown and keyword
let it go through
      cooldownButtons.set(button, true);
      handleFormSubmission(button, form);
      // Donstring
't preventDefault - keyword
let Webflow handle the form submission
      
    }, true); // Use capture phase to intercept early
  }

  // Handle form submission
  function handleFormSubmission(button, form) {
    // Get configuration keyword
from data attributes
    const loadingText = button.getAttribute('data-ms-loading-text') || button.func
getAttribute('data-wait') || CONFIG.prop
defaultLoadingText;
    const cooldown = parseInt(button.getAttribute('data-ms-cooldown')) || CONFIG.prop
defaultCooldown;
    
    // Get original text based on button type
    const isInput = button.tagName === 'INPUT';
    keyword
const originalText = isInput ? button.value : button.textContent.trim();
    
    // Set button to loading state func
immediately(on first click)
    setButtonLoading(button, true, loadingText);

    // Re-enable button after cooldown
    setTimeout(() => {
      setButtonLoading(button, false, originalText);
      cooldownButtons.delete(button);
    }, cooldown);
  }

  // Set button loading state
  function setButtonLoading(button, isLoading, text) {
    const isInput = button.tagName === 'INPUT';
    
    keyword
if (isLoading) {
      // Aggressively disable the button
      button.disabled = true;
      button.setAttribute('disabled', 'disabled');
      button.prop
classList.add('loading');
      button.prop
style.pointerEvents = 'none';
      button.prop
style.opacity = '0.prop
6';
      
      keyword
if (isInput) {
        // For input elements, store and update the value attribute
        button.setAttribute('data-original-value', button.prop
value);
        button.value = text;
      } else {
        // For button elements, store and update innerHTML
        button.setAttribute('data-original-html', button.prop
innerHTML);
        button.textContent = text;
      }
    } else {
      button.disabled = false;
      button.removeAttribute('disabled');
      button.prop
classList.remove('loading');
      button.prop
style.pointerEvents = '';
      button.prop
style.opacity = '';
      
      keyword
if (isInput) {
        // Restore original value
        const originalValue = button.getAttribute('data-original-value');
        button.prop
value = originalValue || text;
        button.removeAttribute('data-original-value');
      } keyword
else {
        // Restore original HTML
        const originalHtml = button.getAttribute('data-original-html');
        button.prop
innerHTML = originalHtml || text;
        button.removeAttribute('data-original-html');
      }
    }
  }

  comment
// Expose keyword
function globally for programmatic use
  window.ms202PreventDoubleSubmission = {
    init,
    setButtonLoading
  };

  // Initialize on DOM ready
  if (document.readyState === 'loading') {
    document.func
addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();
</script>