本文介绍如何在html表单提交时，同步完成两个操作：在新标签页中打开目标页面（如invoice.php），同时将当前页面自动跳转至网站首页，通过javascript结合表单onsubmit事件精准控制导航行为。
本文介绍如何在html表单提交时，同步完成两个操作：在新标签页中打开目标页面（如invoice.php），同时将当前页面自动跳转至网站首页，通过javascript结合表单onsubmit事件精准控制导航行为。
在Web开发中，仅依靠原生HTML表单的action和target属性无法满足“提交后双路径响应”的需求——例如，既要将表单数据发送至invoice.php并在新标签页中展示结果，又要让当前页面立即返回首页（如/）。这是因为target="_blank"仅影响提交响应的承载窗口，而原始页面默认保持不动。
解决方案是将表单提交行为与客户端重定向解耦：利用onsubmit事件触发JavaScript逻辑，在表单提交发起后（但不阻断其默认行为）主动修改当前窗口的location.href。关键在于确保重定向语句执行后仍允许表单正常提交——这要求onsubmit处理函数返回true。
以下是完整、可直接使用的实现代码：
<form method="POST" action="invoice.php" target="_blank" onsubmit="redirectToHomePage(); return true;">
<label>Name</label>
<input type="text" name="name1">
<label>Age</label>
<input type="text" name="age">
<label>Gender</label>
<input type="text" name="gender">
<label>Height</label>
<input type="text" name="height">
<label>Education</label>
<input type="text" name="edu">
<input type="submit" name="submit" value="Submit" class="btn btn-success submit_btn invoice-save-btm">
</form>
<script>
function redirectToHomePage() {
// 跳转至网站根路径（即首页），支持相对路径或完整URL
window.location.href = '/';
}
</script>✅ 技术要点说明：
- onsubmit="redirectToHomePage(); return true;" 是核心写法：先执行跳转逻辑，再显式返回true，确保表单继续按action和target提交；若省略return true或返回false，表单将被阻止提交。
- window.location.href = '/' 适用于大多数部署在域名根目录的站点；若首页为/home或/index.html，请相应调整路径。
- 该方案兼容所有现代浏览器，无需依赖AJAX或服务端重定向，轻量且可靠。
⚠️ 注意事项：
- 不要使用window.open()替代target="_blank"来打开invoice.php，否则可能被浏览器弹窗拦截，且无法自动携带POST数据；target="_blank"配合method="POST"才是标准、安全的跨页数据传递方式。
- 若后端invoice.php存在重定向（如302跳转），需确保其响应头未设置X-Frame-Options或Content-Security-Policy限制新窗口加载，否则可能影响新标签页渲染。
- 如需增强用户体验，可在跳转前添加加载提示（如禁用按钮、显示spinner），避免用户重复提交。
综上，通过一行onsubmit绑定 + 简洁的JS跳转逻辑，即可优雅实现“一提交、双响应”，兼顾功能完整性与代码可维护性。
