如何用jQuery将复选框、日期及文本输入值合并入servicelist[]数组

问题说明 #

在WordPress后台开发产品表单时，原代码仅能将选中的复选框值存入servicelist[]数组，现在需要把复选框、日期输入框、文本输入框的所有有效值合并到同一个数组中，提交后用于邮件发送。

原代码示例（参考） #

1. PHP表单渲染

function render_product_form() {
    ?>
    <form id="product-form">
        <!-- 服务复选框 -->
        <label><input type="checkbox" name="servicelist[]" value="基础安装"> 基础安装</label>
        <label><input type="checkbox" name="servicelist[]" value="调试优化"> 调试优化</label>
        <label><input type="checkbox" name="servicelist[]" value="售后维护"> 售后维护</label>
        
        <!-- 日期与文本输入 -->
        <label>预约日期: <input type="date" name="book-date"></label>
        <label>特殊需求: <input type="text" name="special-request"></label>
        
        <button type="submit">提交表单</button>
    </form>
    <?php
}
add_shortcode('product_service_form', 'render_product_form');

2. 原jQuery提交逻辑

jQuery('#product-form').submit(function(e) {
    e.preventDefault();
    // 仅收集选中的复选框
    var selectedServices = jQuery('input[name="servicelist[]"]:checked').map(function() {
        return jQuery(this).val();
    }).get();
    
    jQuery.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'handle_product_form',
            servicelist: selectedServices
        },
        success: function(res) {
            alert(res.data);
        }
    });
});

3. 原PHP邮件处理

add_action('wp_ajax_handle_product_form', 'handle_product_form_submit');
add_action('wp_ajax_nopriv_handle_product_form', 'handle_product_form_submit');

function handle_product_form_submit() {
    if (!isset($_POST['servicelist']) || !is_array($_POST['servicelist'])) {
        wp_send_json_error('未选择服务');
    }
    
    $services = implode("\n- ", $_POST['servicelist']);
    $mailContent = "用户选择的服务:\n- " . $services;
    
    wp_mail('admin@yourdomain.com', '新表单提交', $mailContent);
    wp_send_json_success('提交成功');
}

修改方案 #

1. 调整jQuery收集数据逻辑

修改提交时的数组收集逻辑，把日期、文本框的有效值（非空时）加入servicelist数组，建议给非复选框值添加前缀标识，方便邮件阅读：

jQuery('#product-form').submit(function(e) {
    e.preventDefault();
    
    // 1. 收集选中的复选框值
    var servicelist = jQuery('input[name="servicelist[]"]:checked').map(function() {
        return jQuery(this).val();
    }).get();
    
    // 2. 添加日期输入值（非空时）
    var bookDate = jQuery('input[name="book-date"]').val();
    if (bookDate) {
        servicelist.push('预约日期: ' + bookDate);
    }
    
    // 3. 添加文本输入值（非空时）
    var specialReq = jQuery('input[name="special-request"]').val();
    if (specialReq.trim() !== '') {
        servicelist.push('特殊需求: ' + specialReq);
    }
    
    // 4. 提交AJAX请求
    jQuery.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'handle_product_form',
            servicelist: servicelist
        },
        success: function(res) {
            alert(res.data);
        }
    });
});

2. PHP端无需额外修改（直接复用原处理逻辑）

原PHP代码已经可以接收数组并转成邮件内容，因为我们已经把所有需要的值合并到了servicelist数组中，邮件内容会自动包含复选框、日期、文本的所有有效信息。

3. （可选）常规表单提交的处理方式

如果不用AJAX，而是常规表单提交，可以添加一个隐藏域存储合并后的数组：

<!-- 在表单内添加隐藏域 -->
<input type="hidden" name="servicelist-all" id="servicelist-all">

然后修改jQuery：

jQuery('#product-form').submit(function(e) {
    // 收集所有值到servicelist数组（同AJAX版逻辑）
    var servicelist = jQuery('input[name="servicelist[]"]:checked').map(function() {
        return jQuery(this).val();
    }).get();
    
    var bookDate = jQuery('input[name="book-date"]').val();
    if (bookDate) {
        servicelist.push('预约日期: ' + bookDate);
    }
    
    var specialReq = jQuery('input[name="special-request"]').val();
    if (specialReq.trim() !== '') {
        servicelist.push('特殊需求: ' + specialReq);
    }
    
    // 转成JSON存入隐藏域
    jQuery('#servicelist-all').val(JSON.stringify(servicelist));
});

PHP端接收时解码：

$servicelist = json_decode($_POST['servicelist-all'], true);
// 后续处理同原代码
$services = implode("\n- ", $servicelist);
$mailContent = "用户提交的信息:\n- " . $services;

最终邮件效果示例 #

用户提交的信息:
- 基础安装
- 调试优化
- 预约日期: 2024-05-20
- 特殊需求: 需要周末上门服务

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