如何解决Campaign Monitor表单Ajax提交需双击问题，实现单次点击提交

Let's break down why you're hitting this double-click problem and fix it step by step.

Why the double-click is happening #

Your current code uses $.getJSON (which sends a GET request) but your form is configured with method="post". Campaign Monitor's subscription endpoints typically expect POST requests for form submissions, so the first GET request might fail silently—making users think their click didn't register, leading them to click again. On top of that, there's no guard against duplicate clicks, so users can spam the button while the request is still processing.

Fixed Solution #

Here's the updated code (HTML stays the same, we'll focus on fixing the JavaScript):

HTML (unchanged for reference)

<form action="https://xxxxxxx.createsend.com/t/d/s/audjhr/" method="post" id="subscribeForm">
  <div class="cv-footer-deserve">
    <input id="fieldEmail" name="cm-audjhr-audjhr" class="cv-news-input input-group-field " type="email" placeholder="Enter your email" value="" aria-label="Enter your email" required />
    <button type="submit" class="subscribe cv-news-btn"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
  </div>
</form>

Updated JavaScript

$(function () {
  $("#subscribeForm").submit(function (e) {
    e.preventDefault();
    
    // Grab references to the form and submit button
    const $form = $(this);
    const $submitBtn = $form.find('.subscribe');
    
    // Disable the button right away to stop duplicate clicks
    $submitBtn.prop('disabled', true).addClass('loading'); // Add a loading class for visual feedback
    
    // Use $.ajax with POST (matches your form's method)
    $.ajax({
      url: $form.attr('action'),
      type: 'POST',
      data: $form.serialize(),
      dataType: 'jsonp', // Campaign Monitor supports JSONP for cross-domain requests
      success: function (data) {
        if (data.Status === 400) {
          // Show your error message to the user here
          console.log('Subscription failed:', data.Message);
          // Re-enable the button so the user can try again
          $submitBtn.prop('disabled', false).removeClass('loading');
        } else {
          // Show your success message here
          console.log('Successfully subscribed!');
          // Optional: Clear the email input
          $form.find('#fieldEmail').val('');
          // Keep button disabled (or re-enable, depending on your UX needs)
          // $submitBtn.prop('disabled', false).removeClass('loading');
        }
      },
      error: function (xhr, status, error) {
        // Handle network errors
        console.log('Request failed:', error);
        // Re-enable the button so the user can retry
        $submitBtn.prop('disabled', false).removeClass('loading');
      }
    });
  });
});

Key Changes Explained #

• Switched to POST request: Aligns with your form's method="post" and matches what Campaign Monitor's API expects, ensuring the request works on the first click.
• Prevented duplicate clicks: Disabling the submit button immediately stops users from clicking again while the request is in flight. The loading class lets you add visual feedback (like a spinner or grayed-out state) so users know something is happening.
• Robust error handling: Added an error callback to catch network issues, and re-enable the button in both error and success cases (adjust this if you don't want users to resubmit right after a successful sign-up).
• JSONP for cross-domain: Campaign Monitor's API requires JSONP for cross-domain requests, which we keep here (just like your original getJSON call, but now paired with the correct POST method).

Quick UX Bonus #

Add some CSS for the .loading class to make the feedback obvious:

.subscribe.loading {
  opacity: 0.7;
  cursor: not-allowed;
  /* Add a spinner icon or other visual here if needed */
}

内容的提问来源于stack exchange，提问作者Pawan Singh Bisht