如何将触发模态框的按钮data-id值传入模态框隐藏域

1. 点击Deposit按钮给隐藏域赋值的落地实现 #

Bootstrap模态框原生提供了show.bs.modal事件，模态框唤起前会自动触发该事件，事件对象中会携带触发模态框的按钮元素，不需要额外给每个按钮绑定单独的点击事件，代码量最少、兼容性最好，两种常用实现选对应你项目的即可：

注意：以上代码不需要修改你现有按钮的模态框唤起配置，只要保证按钮上的data-id属性值和后端要求的支付方式编码一致，直接把代码加到页面里就能生效，普通表单提交、Ajax提交都能正常拿到隐藏域的值。

项目已引入jQuery（适配Bootstrap3/4/5全版本） #

把以下代码放到页面底部</body>标签之前即可：

$(function() {
  $('#exampleModal').on('show.bs.modal', function (event) {
    // 获取触发当前模态框的Deposit按钮
    const triggerButton = $(event.relatedTarget);
    // 读取按钮上的data-id属性值
    const payMethodCode = triggerButton.data('id');
    // 给模态框内的隐藏输入域赋值
    $(this).find('.edit-method-code').val(payMethodCode);
  })
})

未引入jQuery（适配Bootstrap5原生环境） #

同样放在页面底部</body>标签之前：

document.addEventListener('DOMContentLoaded', function() {
  const payModal = document.getElementById('exampleModal');
  payModal.addEventListener('show.bs.modal', function (event) {
    // 获取触发当前模态框的Deposit按钮
    const triggerButton = event.relatedTarget;
    // 读取按钮上的data-id属性值
    const payMethodCode = triggerButton.getAttribute('data-id');
    // 给模态框内的隐藏输入域赋值
    const hiddenInput = payModal.querySelector('.edit-method-code');
    hiddenInput.value = payMethodCode;
  })
})

你可以在浏览器开发者工具中选中对应隐藏输入域，点击不同Deposit按钮查看value值变化，确认赋值是否生效。

2. 区分模态框触发源的其他可选方案 #

除了data-id传值的方案外，可以根据你的业务场景选择以下方案：

• 多data属性传全量参数：如果每个支付渠道的展示信息（比如渠道名称、手续费率、到账时间）是固定的，可以直接在按钮上添加data-method-name、data-fee-rate这类自定义属性，模态框唤起时一次性读取所有属性填充内容，不需要根据id再发请求拉取渠道信息，页面响应更快，适合渠道配置固定的场景。
• 前置校验+全局暂存值：如果点击Deposit按钮后需要先做前置校验（比如判断用户是否实名认证、是否设置支付密码），可以在按钮点击回调中先做校验逻辑，校验通过后把选中的支付方式编码存在全局变量或者sessionStorage里，再手动调用模态框的show方法唤起弹窗，表单提交时直接读取暂存的值即可，注意提交完成或模态框关闭时要清空暂存值，避免不同支付方式数据串改。
• JS映射表存配置：可以在JS里维护一个支付方式配置映射表，给每个按钮加个索引标识，点击时根据索引从映射表中取对应支付方式的全量配置，好处是支付编码等参数不会直接暴露在DOM属性上，对普通爬虫有极弱的防护效果，但前端存储的所有参数都可以被用户通过控制台拿到，安全提升非常有限，非特殊需求不推荐使用。

不推荐为每个支付方式单独做独立模态框，除非不同支付方式的表单字段、交互逻辑差异极大，否则会产生大量重复代码，后续维护成本很高。

优先选择Bootstrap原生事件+data属性的方案，是官方推荐的标准写法，出问题概率最低，后续迭代维护也最方便。

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