为什么动态创建的文本框在Firefox下不能传值？

 昨天关于Firefox和IE的兼容性谈了点自己的体会，不过既然现实是这样，那就研究一下吧。昨天晚上又遇到了Firefox和IE的问题。
开始我想动态创建一个文本框，然后提交数据，最简单的方法当然是

 

1. <table>
2. <form action="test.php">
3. <tr><td>
4. <div id="div1"></div>
5. <input type="submit" value="Submit"/>
6. <input type="button" value="Add" onclick="add();"/>
7. </td></tr>
8. </form>
9. </table>
10. <script type="text/javascript">
11. function add()
12. {
13.     document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML + 
14.     "<span><br/><input type=text name=option[]/>" + 
15.     "<input type=button value=Delete onclick=/"Delete(this);/"/></span>";
16. }
17. function Delete(obj)
18. {
19.     obj.parentNode.innerHTML = "";
20. }
21. </script>

 

以上是样例，在IE下工作得非常正常，但是在Firefox下就出现了很多问题。我把它列出来，供大家参考，以免以后遇到类似的问题

1. 第13行这种写法，会造成在Firefox下不能保存用户输入的数据。也就是说，如果用户输入了内容，点Add追加下一行的时候，用户输入的数据会被清空。
2. 于是我把代码改成这样

1. <script type="text/javascript">
2. function add()
3. {
4.     try{
5.         var obj = document.getElementById("div1");
6.         var node = document.createElement("span");
7.         node.appendChild(document.createElement("br"));
9.         var text = document.createElement("input");
10.         text.name="option[]";
11.         text.type = "text";
12.         node.appendChild(text);
14.         var dnode = document.createElement("input");
15.         dnode.name="option[]";
16.         dnode.value="Delete";
17.         dnode.type = "button";
18.         dnode.onclick = function(evt) { Delete(this); };
19.         node.appendChild(dnode);
21.         obj.appendChild(node);
22.     } catch(e)
23.     {
24.         alert(e);
25.     }
26. }

 

这次能在Firefox和IE下正常工作了，但是问题又来了，在Firefox里点击提交之后，发现新创建的文本框内容没有出现在$_POST里。而IE下是正常的。这次肯定不是javascript的问题了，到底什么地方出问题了，百思不得其解，最后只能求助google.功夫不负有心人，终于在一个论坛上看到了答案，就是<form></form>标签不能嵌入<table><></table>中，这是不规范的写法，造成了数据不能正常传递。关于标记是否规范的检查，有个很好的网站可以验证  http://validator.w3.org 经常做WEB开发的不妨验证一下网页的规范。

最后贴上在Firefox和IE下能正常工作的代码

1. <form action="test.php">
2. <table>
3. <tr><td>
4. <div id="div1"></div>
5. <input type="submit" value="Submit"/>
6. <input type="button" value="Add" onclick="add();"/>
7. </td></tr>
8. </table>
9. </form>
10. <script type="text/javascript">
11. function add()
12. {
13.     try{
14.         var obj = document.getElementById("div1");
15.         var node = document.createElement("span");
16.         node.appendChild(document.createElement("br"));
18.         var text = document.createElement("input");
19.         text.name="option[]";
20.         text.type = "text";
21.         node.appendChild(text);
23.         var dnode = document.createElement("input");
24.         dnode.name="option[]";
25.         dnode.value="Delete";
26.         dnode.type = "button";
27.         dnode.onclick = function(evt) { Delete(this); };
28.         node.appendChild(dnode);
30.         obj.appendChild(node);
31.     } catch(e)
32.     {
33.         alert(e);
34.     }
35. }
36. function Delete(obj)
37. {
38.     obj.parentNode.innerHTML = "";
39. }
40. </script>