如何指定HTML按钮提交页面中的目标表单？

如果你的按钮位于某一表单内，但需要提交页面中另一个带有唯一ID的表单，有两种简单可行的方案：

1. HTML5原生form属性（推荐） #

HTML5为<button>和<input type="submit">元素新增了form属性，直接指定目标表单的ID即可，无需额外JS代码。

示例代码：

<!-- 目标表单 -->
<form id="target-form" action="/submit-target" method="post">
  <input type="text" name="target-data" placeholder="目标表单数据">
</form>

<!-- 按钮所在的表单 -->
<form id="current-form" action="/submit-current" method="post">
  <input type="text" name="current-data" placeholder="当前表单数据">
  <!-- 点击这个按钮会提交target-form，而不是current-form -->
  <button type="submit" form="target-form">提交目标表单</button>
</form>

这个方法简洁高效，现代主流浏览器都支持。

2. JavaScript手动触发提交 #

如果需要兼容旧浏览器，或者要在提交前添加自定义逻辑（比如表单验证），可以用JS手动调用目标表单的submit()方法。

示例代码：

<!-- 目标表单 -->
<form id="target-form" action="/submit-target" method="post">
  <input type="text" name="target-data" placeholder="目标表单数据">
</form>

<!-- 按钮所在的表单 -->
<form id="current-form" action="/submit-current" method="post">
  <input type="text" name="current-data" placeholder="当前表单数据">
  <!-- 注意这里按钮type设为button，避免默认提交当前表单 -->
  <button type="button" onclick="submitTargetForm()">提交目标表单</button>
</form>

<script>
function submitTargetForm() {
  // 可选：添加自定义验证逻辑
  const targetForm = document.getElementById('target-form');
  if (targetForm.checkValidity()) {
    targetForm.submit();
  } else {
    // 处理验证失败的情况
    targetForm.reportValidity();
  }
}
</script>

或者用更规范的事件绑定方式（避免内联onclick）：

<button type="button" id="submit-btn">提交目标表单</button>

<script>
document.getElementById('submit-btn').addEventListener('click', function() {
  const targetForm = document.getElementById('target-form');
  targetForm.submit();
});
</script>

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