WordPress自定义支付表单：合并两个select输入值至单个输入框

Hey there! Let’s work through this problem together—since you’re hitting errors with the bank’s POST API when trying to merge two select inputs on form submit, the issue is almost certainly tied to how you’re passing the merged value, or not matching the exact format/field name the bank expects. Here are three reliable solutions tailored to WordPress:

Option 1: Merge Options at Render Time (Recommended, No JS Dependency) #

Instead of merging values after the user selects options, build a single merged select upfront using PHP. This avoids any frontend submission issues and ensures the bank gets exactly what it needs from the start.

Example Code: #

<?php
// Replace these with your actual select option data
$primary_options = [
    'bronze' => 'Bronze Plan',
    'silver' => 'Silver Plan',
    'gold' => 'Gold Plan'
];
$addon_options = [
    'extra1' => 'Extra Support',
    'extra2' => 'Premium Features'
];
?>

<!-- Merged Select for Bank API -->
<select name="bank_plan_identifier" id="merged-plan-select">
    <option value="">Choose Your Plan</option>
    <?php foreach ($primary_options as $primary_val => $primary_label): ?>
        <?php foreach ($addon_options as $addon_val => $addon_label): ?>
            <!-- Combine values using the separator the bank requires (e.g., "-", "|", or space) -->
            <option value="<?php echo esc_attr($primary_val . '-' . $addon_val); ?>">
                <?php echo esc_html($primary_label . ' + ' . $addon_label); ?>
            </option>
        <?php endforeach; ?>
    <?php endforeach; ?>
</select>

This way, users select a pre-merged option, and the form submits a single, correctly formatted value directly to the bank. No extra JS or backend processing needed.

Option 2: Fix Frontend Merge Logic (If You Need to Keep Two Selects) #

If you must keep the two original select inputs visible, ensure your JS correctly merges values and formats the POST data to match the bank’s requirements. Common mistakes here include using the wrong separator, not removing redundant fields, or failing to validate selections.

Step-by-Step Implementation: #

1. Add a hidden input to store the merged value (named exactly what the bank expects)
2. Update the hidden input when either select changes
3. Clean up the POST data before submission to avoid sending extra fields

Example Code: #

<!-- Your Original Selects -->
<select id="primary-select" name="primary_plan">
    <option value="bronze">Bronze Plan</option>
    <option value="silver">Silver Plan</option>
</select>
<select id="addon-select" name="addon_feature">
    <option value="extra1">Extra Support</option>
    <option value="extra2">Premium Features</option>
</select>

<!-- Hidden Input for Merged Value (Bank's Required Field Name) -->
<input type="hidden" id="merged-value" name="bank_plan_identifier">

<!-- Form Submission Logic -->
<script>
const form = document.getElementById('your-payment-form');
const primarySelect = document.getElementById('primary-select');
const addonSelect = document.getElementById('addon-select');
const mergedInput = document.getElementById('merged-value');

// Update merged value whenever a select changes
function updateMergedValue() {
    const primaryVal = primarySelect.value;
    const addonVal = addonSelect.value;
    // Use the EXACT separator the bank specifies (check their docs!)
    mergedInput.value = `${primaryVal}-${addonVal}`;
}

primarySelect.addEventListener('change', updateMergedValue);
addonSelect.addEventListener('change', updateMergedValue);

// Handle form submission
form.addEventListener('submit', function(e) {
    // Validate both selects have a value
    if (!primarySelect.value || !addonSelect.value) {
        alert('Please select both a plan and add-on!');
        e.preventDefault();
        return;
    }

    // Remove original select names so they don't clutter the POST data
    primarySelect.removeAttribute('name');
    addonSelect.removeAttribute('name');

    // Optional: Double-check merged value format before submitting
    if (!mergedInput.value.includes('-')) {
        alert('Invalid selection format. Please try again.');
        e.preventDefault();
        return;
    }
});
</script>

Critical Note: Always confirm the bank’s required separator (e.g., -, |, or even a space) and field name—using the wrong one is the #1 cause of API errors here.

Option 3: Merge Values in WordPress Backend (Most Reliable) #

If frontend fixes still aren’t working, handle the merge on the WordPress backend before sending data to the bank. This avoids frontend interference and ensures data integrity.

Example Code (Add to Your Theme’s functions.php or a Custom Plugin): #

add_action('init', 'merge_payment_selects_before_bank_request');
function merge_payment_selects_before_bank_request() {
    // Only run on form submission
    if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['primary_plan'], $_POST['addon_feature'])) {
        return;
    }

    // Sanitize and get select values
    $primary_val = sanitize_text_field($_POST['primary_plan']);
    $addon_val = sanitize_text_field($_POST['addon_feature']);

    // Merge using the bank's required format
    $merged_val = $primary_val . '-' . $addon_val;

    // Update POST data with the merged value (use the bank's exact field name)
    $_POST['bank_plan_identifier'] = $merged_val;

    // Remove original fields to avoid sending extra data to the bank
    unset($_POST['primary_plan'], $_POST['addon_feature']);
}

This hook intercepts the form submission, merges the values, and adjusts the POST data to match what the bank expects—no frontend work needed.

Final Troubleshooting Tip #

Double-check the bank’s API documentation to confirm:

• The exact field name they expect for the merged value
• The allowed format (separator, character limits, etc.)
• Whether they accept extra fields in the POST request (if yes, you might not need to remove the original select names)

内容的提问来源于stack exchange，提问作者Luis Cortez Castillo