jQuery 添加 input 表单提交无数据

最新推荐文章于 2024-07-18 17:16:19 发布

doctor韦

最新推荐文章于 2024-07-18 17:16:19 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 表单数据

本文链接：https://blog.youkuaiyun.com/weizhongxing6/article/details/78271140

上次开发项目，我发现一个很奇怪的现象，让我苦恼了很久，现在分享给大家，希望大家看完就会弄。

情况是这样的，直接上代码：

<html>
<head></head>
<body>
<form action="xx.php" method="post" >
<table>

 <tr id='before'>
<td>用户名</td>
<td><input type='text' name='uname'/></td>

</tr>

<tr><td><input type='submit' value='提交'/></td></tr>

</table></form>

<script>
var op=$("<input type='hidden' name='uid'/>");
$("#before").before(op);
</script>
</body>
</html>

代码如上，有一个表单，表单里面有一个文本框，可以输入用户名。然后，在后面我们用jQuery还添加了一个隐藏域。当点击提交时，你会发现只有用户名被提交了，而用jquery添加的隐藏域却没有提交。

这是为什么呢？

原来，jquery添加的元素，都有一个form属性。如果想要解决这个问题，只需要改两个地方。

1.首先为form取个名字

将

<form action="xx.php" method="post" >

改成

<form action="xx.php" name="myform" method="post" >

2.在创建表单元素时，别忘给表单元素加form属性。

将

var op=$("<input type='hidden' name='uid'/>");

改成

var op=$("<input type='hidden' name='uid'/>");
op.attr("form","myform");

这样提交表单时就会把这个动态创建的元素也提交上去了。