表单提交后需用javascript拦截默认行为并根据用户输入分支跳转，关键步骤包括：submit事件中调用event.preventdefault()、用document.queryselector获取radio或select值、fetch提交时匹配后端接收格式、避免误用history.pushstate。
表单提交后怎么跳转到不同页面
直接用 form 的 action 属性做不到“根据答案跳转”，它只认死地址。真要实现分支跳转，得靠 JavaScript 拦住默认提交，在 JS 里判断用户选了什么、填了什么，再手动 window.location.href 或 form.submit() 到不同地址。
常见错误现象：form 提交后总跳同一个页面，或者 JS 判断写了但没加 event.preventDefault()，导致页面先刷新、JS 还没执行完。
- 必须在
submit事件里调用event.preventDefault()，否则浏览器会立刻走默认提交流程 - 判断逻辑写在
submit里，别写在按钮的click上——回车提交会绕过 click - 如果后端也要处理数据，建议用
fetch提交，成功后再跳转；避免用location.href跳转丢失表单数据
radio 或 select 怎么读取用户选择值
document.querySelector 是最稳的读法，别用 getElementById 加一堆 if-else 判断 id 是否存在。radio 要注意：同一组 name 下只有被选中的那个才有 value，未选中的是 null；select 直接读 value 就行，不用遍历 option。
使用场景：比如问卷第一题是“是否在职”，选“是”跳 /job-details.html，选“否”跳 /study-plan.html。
立即学习“前端免费学习笔记（深入）”；
- radio 组：用
document.querySelector('input[name="status"]:checked')，然后取.value；没选时返回null，记得判空 - select 下拉：直接
document.querySelector('#career').value，不需要找 selected index - 别用
getElementsByName返回类数组再遍历——多写三行还容易漏掉 checked 判断
用 fetch 提交再跳转，为什么后端收不到数据
因为 fetch 默认发的是 application/json，而 PHP/Python 的 $_POST 或 request.form 只收 application/x-www-form-urlencoded 或 multipart/form-data。不匹配就等于没传。
性能影响：JSON 方式对前后端分离项目更干净，但传统 PHP 表单习惯会卡在这一步。
- 想让后端收到
$_POST，fetch 要设headers: {'Content-Type': 'application/x-www-form-urlencoded'}，且 body 用new URLSearchParams(formData) - 如果后端明确支持 JSON，就保持
application/json，但后端代码得改用json_decode(file_get_contents('php://input'))（PHP）或request.get_json()（Flask） - 别把整个
FormData对象直接丢进body——fetch 不会自动序列化它
history.pushState 能替代跳转吗
不能。它只改地址栏和历史记录，页面 DOM 不变，也不会触发新页面的 JS 初始化或 CSS 重载。用户点“下一步”后看到的还是原页面，只是 URL 变了——这根本不是跳转，是伪路由。
容易踩的坑：有人以为用 pushState + 手动替换 DOM 就能模拟多页，结果 SEO 失效、后退键行为错乱、Google Analytics 不统计新页面。
- 真实跳转必须用
window.location.href = 'xxx'或form.action = 'xxx'; form.submit() -
pushState只适合 SPA 场景，且需要配套的路由监听（如popstate）和完整前端渲染逻辑 - 纯静态 HTML 表单 + 无构建工具的项目，老老实实用 href 跳转最省心
分支跳转看着简单，但实际卡点都在细节：event.preventDefault 漏没漏、radio checked 判没判、fetch content-type 配没配对、后端解析方式跟不跟得上。这些地方一松劲，就是白屏、404、数据丢了还查不出哪出的问题。
