如何将Gravity Forms下拉/单选框值映射并同步更新至隐藏字段？

Hey there! 针对你这个为动物救助组织打造的公益项目需求，我整理了一套前端实时同步+后端验证的可行方案，不需要第三方开发者，你可以直接按照步骤操作：

一、前期准备 #

• 确保你已经在Gravity Forms中创建了：
  • 目标下拉框/单选按钮字段（记住它的字段ID，比如2）
  • 用于接收映射值的隐藏字段（记住它的字段ID，比如3）
• 找到你的表单ID：编辑表单时，地址栏id=后面的数字就是（比如1）

二、前端实时同步（实现实时更新） #

通过JavaScript监听下拉框/单选按钮的变化，实时将映射后的值写入隐藏字段。你可以把这段代码添加到主题的「自定义JavaScript」区域，或者通过Gravity Forms的脚本钩子加载。

针对下拉框的代码： #

document.addEventListener('DOMContentLoaded', function() {
    // 替换成你的表单ID和下拉字段ID
    const sourceField = document.querySelector('#input_1_2');
    // 替换成你的表单ID和隐藏字段ID
    const targetHiddenField = document.querySelector('#input_1_3');
    
    // 定义你的值映射关系
    const valueMap = {
        'Adoptable': 'A',
        'Hold': 'H',
        'Adopted': 'X',
        'Pending': 'P'
    };

    // 页面加载时初始化隐藏字段值（如果有默认选中项）
    if (sourceField) {
        targetHiddenField.value = valueMap[sourceField.value] || '';
    }

    // 监听下拉框变化，实时更新隐藏字段
    sourceField.addEventListener('change', function() {
        targetHiddenField.value = valueMap[this.value] || '';
    });
});

针对单选按钮的代码： #

单选按钮的选择器略有不同，用这段代码：

document.addEventListener('DOMContentLoaded', function() {
    // 替换成你的表单ID和单选字段ID
    const sourceRadioFields = document.querySelectorAll('input[name="input_1_2"]');
    // 替换成你的表单ID和隐藏字段ID
    const targetHiddenField = document.querySelector('#input_1_3');
    
    const valueMap = {
        'Adoptable': 'A',
        'Hold': 'H',
        'Adopted': 'X',
        'Pending': 'P'
    };

    // 初始化默认选中项对应的映射值
    const initialSelected = document.querySelector('input[name="input_1_2"]:checked');
    if (initialSelected) {
        targetHiddenField.value = valueMap[initialSelected.value] || '';
    }

    // 给每个单选按钮添加变化监听
    sourceRadioFields.forEach(field => {
        field.addEventListener('change', function() {
            if (this.checked) {
                targetHiddenField.value = valueMap[this.value] || '';
            }
        });
    });
});

三、后端验证（确保提交值准确） #

前端代码可能被篡改，所以我们需要用PHP钩子在表单提交时再做一次验证，保证隐藏字段的值是正确的映射结果。把这段代码添加到你的主题functions.php文件里，或者自定义插件中：

add_filter('gform_pre_submission', 'gf_map_field_to_hidden_field');
function gf_map_field_to_hidden_field($form) {
    // 替换成你的表单ID
    $targetFormId = 1;
    // 替换成你的下拉/单选字段ID
    $sourceFieldId = 2;
    // 替换成你的隐藏字段ID
    $hiddenFieldId = 3;

    // 只针对目标表单执行
    if ($form['id'] !== $targetFormId) {
        return $form;
    }

    // 获取用户提交的源字段值
    $sourceValue = rgpost('input_' . $sourceFieldId);
    // 定义映射关系
    $valueMap = array(
        'Adoptable' => 'A',
        'Hold' => 'H',
        'Adopted' => 'X',
        'Pending' => 'P'
    );

    // 更新隐藏字段的提交值
    if (isset($valueMap[$sourceValue])) {
        $_POST['input_' . $hiddenFieldId] = $valueMap[$sourceValue];
    } else {
        // 如果源值不在映射列表中，设置为空或自定义默认值
        $_POST['input_' . $hiddenFieldId] = '';
    }

    return $form;
}

关键注意事项 #

• 所有代码中的表单ID、字段ID都要替换成你自己的实际ID
• 如果你的主题禁用了自定义JS，可以用Gravity Forms的钩子来加载脚本，比如：

add_action('gform_enqueue_scripts', 'gf_enqueue_custom_script', 10, 2);
function gf_enqueue_custom_script($form, $is_ajax) {
    if ($form['id'] == 1) { // 替换成你的表单ID
        wp_add_inline_script('gform_gravityforms', '/* 这里放你的JS代码 */');
    }
}

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