最轻量做法是提交前用javascript将多个input值拼接至带name属性的隐藏字段。需在form submit事件中阻止默认行为，过滤空值后join，并确保dom已更新；动态内容优先读数据源，调试用formdata验证。
表单提交前用 JavaScript 合并多个 <input> 值到一个字段
直接在提交前把几个分散的输入框（比如「省」「市」「区」）拼成一个字符串，塞进一个隐藏字段再提交，是最轻量、兼容性最好的做法。不需要改后端接口，也不依赖框架。
关键不是“怎么拼”，而是“什么时候拼”——必须在 submit 事件触发后、表单真正发出请求前完成，否则可能被浏览器缓存或拦截。
- 监听
form.addEventListener('submit', handler)，别用click绑定按钮，防止回车提交绕过 - 用
event.preventDefault()阻止默认行为，拼完再调用form.submit() - 隐藏字段需有
name属性（如name="address"），否则不会被提交 - 值拼接时注意空格、分隔符是否符合后端预期，建议统一用
' '或'/'，避免用户手动输空格导致前后缀污染
避免重复提交或拼接失效的 DOM 时机问题
如果表单里用了异步加载的组件（比如地址选择器 Vue/React 子组件），或者输入框是动态插入的，submit 触发时 DOM 可能还没更新完毕，读到的还是旧值。
- 不要在
submit里直接读input.value，先确认元素存在且已渲染：if (el && el.value !== undefined) - 对动态内容，优先用数据源（如组件内部的
state或全局变量）拼接，而不是反复查 DOM - 若必须读 DOM，可加微任务兜底：
Promise.resolve().then(() => { /* 拼接逻辑 */ })，确保 DOM 更新队列清空 - Chrome DevTools 中检查提交的 FormData，确认隐藏字段是否出现在列表里——没出现基本就是
name缺失或被disabled了
后端接收时发现合并字段为空或格式错乱
常见原因是前端拼接逻辑和后端解析逻辑不一致，尤其当用户删掉某个输入框内容又提交时，容易产生多余分隔符（如 "北京//朝阳"）或全空字符串。
- 前端拼接前过滤空值：
[province, city, district].filter(v => v?.trim()).join(' ') - 后端不要假设字段一定非空，始终做 trim + split + filter 空项处理
- 如果后端强依赖三级结构（如必须含省、市），前端就该禁用空提交，用
required或自定义校验提示 - 调试时在控制台打印
new FormData(form)，展开看每个键值对，比只看console.log(input.value)更可靠
用 FormData 替代隐藏字段的适用场景
当需要合并的字段本身还要单独提交（比如「市」字段既参与拼接，又要独立存库），就不能只靠隐藏字段——得用 FormData 手动构造提交体。
- 创建新实例：
const fd = new FormData(form)，它会自动收集所有带name的可提交字段 - 覆盖原字段：
fd.set('address', [p, c, d].filter(x => x).join(' ')) - 删除干扰项（如不想提交原始「省」字段）：
fd.delete('province') - 用
fetch提交：fetch('/api', { method: 'POST', body: fd })；注意此时不能用form.submit()，它不支持自定义FormData - IE 不支持
FormData.append()修改已有实例，老项目慎用
实际中最容易被忽略的是：拼接逻辑写在了表单外的某个按钮点击里，但用户按回车提交时根本不会触发它。表单提交路径必须唯一、可控，所有入口都要收敛到同一个 submit 处理函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
