如何在Laravel与jQuery中点击提交按钮时向模态框隐藏输入框传值

API 探路者

2026-5-15

实现点击按钮将值传入模态框隐藏输入框的方案

这其实很容易实现，利用Bootstrap模态框的内置事件就能搞定，我给你两种方案，适配不同的代码环境：

方案一：基于jQuery（推荐，适配Bootstrap常规用法）

因为你用到了data-toggle、data-target这些Bootstrap模态框的属性，项目里应该已经引入了jQuery，直接用这段代码就能实现需求：

// 监听模态框即将显示的事件
$('#confirm-delete-modal').on('show.bs.modal', function (event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = $(event.relatedTarget);
  // 从按钮的data属性中提取报表名称
  const reportName = triggerBtn.data('report-name');
  // 找到模态框内的隐藏输入框并赋值
  $(this).find('input[name="report_name"]').val(reportName);
});

代码解释：

show.bs.modal是Bootstrap模态框的内置前置事件，在模态框开始渲染但还未完全显示时触发，刚好适合提前给输入框赋值。
event.relatedTarget会自动指向触发模态框的那个按钮，不用额外绑定点击事件，避免重复监听。
data('report-name')是jQuery便捷获取data属性的方法，等价于attr('data-report-name')，但更简洁。

方案二：原生JavaScript（无jQuery依赖）

如果项目里没有引入jQuery，用原生JS也能实现同样的效果：

// 获取模态框元素
const modal = document.getElementById('confirm-delete-modal');
// 监听模态框的show.bs.modal事件
modal.addEventListener('show.bs.modal', function(event) {
  // 获取触发按钮
  const triggerBtn = event.relatedTarget;
  // 提取data-report-name的值
  const reportName = triggerBtn.getAttribute('data-report-name');
  // 找到隐藏输入框并赋值
  this.querySelector('input[name="report_name"]').value = reportName;
});