如何用jQuery捕获Formcraft表单提交并发送数据至MongoDB API？

Got it, let's walk through fixing this issue step by step. Since Formcraft's default submission isn't pushing data to your mLab-hosted MongoDB API, we'll build a custom jQuery workflow to capture the form data, send it manually, and handle user feedback properly.

Step 1: Set Up the jQuery Wrapper for WordPress #

WordPress loads jQuery in no-conflict mode by default, so we'll wrap our code to use the $ alias safely:

jQuery(document).ready(function($) {
  // Our custom submission code lives here
});

Step 2: Capture Submit Event & Block Default Behavior #

First, we'll target the submit button (using its submit-button class) and stop Formcraft's default submission logic from running—this prevents page refreshes or failed plugin-side requests:

jQuery(document).ready(function($) {
  $('.submit-button').on('click', function(e) {
    e.preventDefault(); // Halt the default form submission
    const $button = $(this);
    const $form = $button.closest('form'); // Grab the parent form element
  });
});

Step 3: Gather Form Field Data #

You mentioned you know your field class names—let's assume your fields use classes like .formcraft-name, .formcraft-email, .formcraft-message (swap these for your actual field classes). We'll collect their values into a clean JSON object:

jQuery(document).ready(function($) {
  $('.submit-button').on('click', function(e) {
    e.preventDefault();
    const $button = $(this);
    const $form = $button.closest('form');

    // Collect field values (update class names to match your fields!)
    const formData = {
      name: $form.find('.formcraft-name').val(),
      email: $form.find('.formcraft-email').val(),
      message: $form.find('.formcraft-message').val(),
      submissionTimestamp: new Date().toISOString() // Optional: add a timestamp for reference
    };
  });
});

Step 4: Send Data to mLab MongoDB API #

mLab's API endpoint follows this structure:
https://api.mlab.com/api/1/databases/[YOUR_DB_NAME]/collections/[YOUR_COLLECTION_NAME]?apiKey=[YOUR_API_KEY]

We'll use jQuery's $.ajax() to send the POST request, plus handle loading states and user feedback:

jQuery(document).ready(function($) {
  $('.submit-button').on('click', function(e) {
    e.preventDefault();
    const $button = $(this);
    const $form = $button.closest('form');
    const $loadingIcon = $button.find('.loading-icon');

    // Collect field data (update class names!)
    const formData = {
      name: $form.find('.formcraft-name').val(),
      email: $form.find('.formcraft-email').val(),
      message: $form.find('.formcraft-message').val(),
      submissionTimestamp: new Date().toISOString()
    };

    // Activate loading state & disable button
    $button.prop('disabled', true);
    $loadingIcon.css('opacity', '1'); // Make loading icon visible (tweak CSS if needed)

    // Send POST request to mLab API
    $.ajax({
      url: 'https://api.mlab.com/api/1/databases/YOUR_DB_NAME/collections/YOUR_COLLECTION_NAME?apiKey=YOUR_API_KEY',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(formData),
      success: function(response) {
        // Success feedback for the user
        alert('Your request was sent successfully!');
        // Optional: Reset the form after submission
        $form[0].reset();
      },
      error: function(xhr, status, error) {
        // Error feedback
        alert('Oops, something went wrong: ' + error);
        console.log('Error details:', xhr.responseText); // Check dev tools for more info
      },
      complete: function() {
        // Turn off loading state & re-enable button
        $button.prop('disabled', false);
        $loadingIcon.css('opacity', '0');
      }
    });
  });
});

Key Adjustments & Notes #

• Replace Placeholders: Swap YOUR_DB_NAME, YOUR_COLLECTION_NAME, and YOUR_API_KEY with your actual mLab credentials.
• Field Class Check: Double-check field class names by inspecting your form in browser dev tools (right-click > Inspect) to ensure they match the code.
• Security Warning: Exposing your mLab API key directly in frontend code is risky—anyone can steal it to modify your database. For production, use a WordPress REST API proxy:
  1. Add a custom REST route in your theme's functions.php
  2. Have the route handle the mLab request via PHP's wp_remote_post
  3. Point your jQuery AJAX to this WP endpoint instead of mLab directly
• Loading Icon CSS: If the loading icon is hidden by default, add this snippet to your theme's CSS:

.spin-cover .loading-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.spin-cover .loading-icon.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

How to Add This to WordPress #

• Go to Appearance > Theme File Editor
• Open your theme's footer.php file
• Paste the jQuery code just before the closing </body> tag
• Save changes (or use a plugin like Code Snippets if you don't want to edit theme files directly)

内容的提问来源于stack exchange，提问作者Andrea