近日,在使用Js动态生成input,然后通过form提交时,发现提交不了!通过浏览器F12开发模式下,查看网络时,发现请求的时候没有带参数信息。通过搜索发现网上有form表单无法提交js动态添加的表单元素遇到的坑相关的文章。

js动态生成的input 使用form无法提交原因

通过浏览器查看源代码发现,<form>标签竟然没有把JS动态生成的 input 放在里面,源代码显示的是动态添加的 input 是放在form外面的,而程序代码里明明是把 动态生成的 input 放在form里的。仔细检查发现原来是因为 form 与  table 的位置搞错了。

js动态生成的input 使用form无法提交原因

正常情况

<form method="post" action=" url  ">
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</form>

js动态添加的表单元素不能提交到服务器端的情况

<table>
<form method="post" action="url ">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</form>
</table>

结论要保证form和它放置目标html标签的完整性,例如:上面的table就不能用form标签把table和table的tr节点分开。可以通过浏览器的开发工具。在生成的源代码里面查看js动态添加的标签是否正常闭合,且在form里面。