上次开发项目,我发现一个很奇怪的现象,让我苦恼了很久,现在分享给大家,希望大家看完就会弄。
情况是这样的,直接上代码:
<html> <head></head> <body> <form action="xx.php" method="post" > <table> <tr id='before'> <td>用户名</td>
</tr><td><input type='text' name='uname'/></td>
<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");
这样提交表单时就会把这个动态创建的元素也提交上去了。