Laravel Blade中Bootstrap Modal无法接收voucher ID问题求助

问题原因及修复方案 #

你代码存在两个导致ID传值失败的问题，按以下步骤修改即可：

• 第一，JS事件回调函数语法错误：你写的function*e()多了个*符号，function*是JS生成器函数语法，不适用于普通事件回调，会导致回调逻辑不执行。
• 第二，data属性取值名不匹配：HTML按钮上的自定义属性为data-voucher-id，jQuery的.data()方法会自动将横杠分隔的属性名转为驼峰格式，你当前用下划线voucher_id取值是取不到对应值的。

修正后的JS代码

<script type="text/javascript">
  $('#addbankingModal').on('show.bs.modal', function(e) {
      // 这里取值用驼峰voucherId，或者直接写voucher-id也可以
      var voucherId = $(e.relatedTarget).data('voucherId');
      $(e.currentTarget).find('input[name="voucherid"]').val(voucherId);
  });
</script>

可选优化

确认传值正常后，你可以给voucherid输入框加上type="hidden"属性，避免在模态框中显示该字段：

<input type="hidden" name="voucherid" value="">

修改完成后点击按钮触发模态框，即可看到voucherid输入框已经正确填充了对应记录的ID，表单提交后就能正常更新对应数据库记录。

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