跨表单提交需用JavaScript将A表单数据提取并填入B表单后提交，浏览器不支持直接跨提交；清空A表单须手动遍历重置各类型控件值，不可用reset()。
跨表单提交不是标准 HTML 行为，浏览器不支持一个 <form></form> 直接把数据发给另一个表单的 action。所谓“跨表单提交”，本质是**用 JavaScript 把 A 表单的数据取出来，塞进 B 表单，再触发 B 表单提交**——清空内容也得手动做，浏览器不会自动联动。
为什么不能直接跨 <form></form> 提交
HTML 规范里，submit 事件只作用于它所属的 <form></form> 元素。你点 A 表单里的按钮，哪怕写 document.getElementById('formB').submit()，也只是让 B 表单提交它自己的字段，和 A 表单毫无关系。A 表单的数据根本没传过去。
- 常见错误现象：点了“提交到其他表单”按钮，B 表单发出去了，但后端收不到 A 表单的字段，因为 B 表单里压根没填那些值
- 所有控件必须有
name属性，否则FormData或form.elements拿不到值 - 如果 A 表单用了
disabled字段，它的值不会被提交——得用readonly替代，或手动取.value
用 FormData 中转 + 手动填充 B 表单
这是最可控、兼容性好（IE10+）、且能处理文件上传的方式。核心是：从 A 表单构造 FormData，再遍历设进 B 表单对应字段。
- 确保 A 和 B 表单字段
name一致，或建立映射关系（比如 A 的user_name→ B 的username） - 对
<input type="file">，不能直接赋值（安全限制），得用FormData.append()配合fetch或XMLHttpRequest发送 - 普通文本/选择框可用
formB.querySelector('[name="xxx"]').value = value填充 - 记得调用
formB.dispatchEvent(new Event('input', { bubbles: true }))，触发 Vue/React 的响应式更新或自定义校验
示例片段：
立即学习“前端免费学习笔记（深入）”；
const formA = document.getElementById('formA');
const formB = document.getElementById('formB');
formA.addEventListener('submit', e => {
e.preventDefault();
const data = new FormData(formA);
// 填充普通字段
for (const [key, value] of data.entries()) {
const el = formB.querySelector(`[name="${key}"]`);
if (el && !el.type === 'file') el.value = value;
}
// 手动提交 B 表单
formB.submit();
});
提交后清空 A 表单的坑
别用 formA.reset() ——它会把所有字段恢复成初始 value，而不是清空；如果字段初始有默认值（比如 <input value="default">），就清不干净。
- 正确做法：遍历
formA.elements，对text/email/textarea设.value = ''；对checkbox/radio设.checked = false；对select设.selectedIndex = 0 - 注意
disabled字段也要清，否则下次提交还带着旧值（虽然不参与提交，但 UI 上残留） - 如果用了第三方表单库（如 Formik、VeeValidate），清空逻辑得走它的 API，不能直接操作 DOM
真正麻烦的不是“怎么跨”，而是字段类型不一致、命名不统一、禁用状态干扰、以及清空时漏掉某类控件——这些细节不处理，用户点一次就卡住一次。
