HTML POST表单内模态框的input值未随请求提交该如何解决？

模态框内表单数据的提交规则 #

你的基础认知没有错误：默认只有同时满足以下条件的表单元素，才会随POST请求自动提交：

• 元素位于<form>标签的闭合范围之内
• 元素带有合法的name属性
• 元素未设置disabled属性

模态框本身是纯UI组件，不会影响表单提交逻辑。你无法获取$_POST['input2']，最常见的原因是你使用的前端框架模态框默认做了DOM重定向：为了避免层级冲突、样式异常，绝大多数模态框组件都会在渲染时把整个模态框的DOM结构移动到<body>根节点下，哪怕你写代码时把模态框嵌在<form>内部，实际运行时input2已经脱离了<form>的范围，自然不会被提交。你可以通过浏览器元素面板查看input2的实际DOM位置验证这个问题。

可行实现方案 #

方案1：修改模态框挂载配置 #

几乎所有模态框组件都提供了自定义挂载节点的配置项，你可以直接指定把模态框挂载到你的<form>节点内部，即可让input2正常被提交。示例参考：

// Bootstrap 5.2+ 模态框指定挂载容器
const modal = new bootstrap.Modal('#yourModal', {
  container: '#yourFormId'
})

不同框架的配置名不同：比如Element UI设置append-to-body="false"，Ant Design设置getContainer为form节点即可。

方案2：隐藏值同步 #

如果不想修改模态框挂载逻辑，可以在<form>内部新增一个同名隐藏输入框，每次模态框内的input2值变化时同步到隐藏框即可：

<form id="yourForm" method="post">
  <!-- 原有表单元素 -->
  <input type="hidden" name="input2" id="input2Hidden">
</form>

<!-- 模态框内输入框 -->
<input type="text" id="input2Modal" oninput="document.getElementById('input2Hidden').value = this.value">

方案3：手动收集数据提交 #

如果你用AJAX提交表单，可以手动把模态框内的参数追加到提交数据中：

const formData = new FormData(document.getElementById('yourForm'))
// 追加模态框内的输入值
formData.append('input2', document.getElementById('input2Modal').value)

fetch('/submit-url', {
  method: 'POST',
  body: formData
})

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