RSForm捐赠表单添加可选3%卡费勾选框的实现指南

正确实现步骤 #

1. 添加卡费覆盖勾选框 #

进入RSForm Pro表单管理后台，新增一个Checkbox字段，配置如下：

• 字段标签：覆盖3%卡费
• Name：cover_fee
• Value：1

2. 植入自定义计算脚本 #

进入表单的「属性」标签，下滑找到「Scripts」板块，点击「Custom Code」，在JavaScript区域粘贴以下代码：

RSFormPro.addEvent(window, 'load', function() {
    // 替换成你表单里对应字段的真实ID
    var donationField = document.getElementById('donation');
    var coverFeeCheckbox = document.getElementById('cover_fee');
    var totalField = document.getElementById('total');

    function calculateTotal() {
        // 读取捐赠金额，非数字则按0处理
        var donationAmount = parseFloat(donationField.value) || 0;
        // 根据勾选状态计算3%手续费
        var fee = coverFeeCheckbox.checked ? donationAmount * 0.03 : 0;
        // 更新总额，保留两位小数
        totalField.value = (donationAmount + fee).toFixed(2);
    }

    // 绑定触发计算的事件
    RSFormPro.addEvent(donationField, 'keyup', calculateTotal);
    RSFormPro.addEvent(coverFeeCheckbox, 'change', calculateTotal);
    // 页面加载完成后先执行一次计算，避免初始值异常
    calculateTotal();
});

3. 核对字段ID #

一定要把代码里的donation、cover_fee、total替换成你表单中：

• 捐赠金额输入框的HTML ID
• 卡费覆盖勾选框的HTML ID
• 总额显示字段的HTML ID

失效问题排查 #

如果按上面步骤操作后功能仍不生效，检查以下几点：

1. 打开浏览器开发者工具（F12），查看Console面板是否有JS错误，比如提示某个字段ID不存在
2. 确认自定义JS已正确加载：查看页面源码，搜索这段代码是否存在
3. 若总额字段是只读展示（不是输入框），把代码里的totalField.value = ...改成totalField.innerHTML = ...
4. 测试捐赠金额输入合法数字，避免非数值内容导致计算失败

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