IE未提交动态添加的表单元素
我编写了一些JavaScript来允许编辑HTML表单中的项目列表，包括添加和删除项目。让它在Firefox中工作。在Internet Explorer中尝试时，我发现所有添加的项都没有随表单一起提交。
长话短说。经过大量的简化、调试，找出了触发IE忽略新表单输入的是哪一行。这样，行为问题就解决了。
但现在我必须问:为什么？这是IE错误吗？
以下是简化的代码：
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function add() {
div = document.getElementById("mylist");
// *** Adding text here works perfectly fine. ***
div.innerHTML += " ";
e = document.createElement("input");
e.setAttribute("type", "text");
e.setAttribute("name", "field3");
e.setAttribute("value", "--NEWVALUE--");
div.appendChild(e);
// *** Adding text here works perfectly fine in Firefox, but for
// Internet Explorer it causes field3 to not be submitted. ***
//div.innerHTML += " ";
}
</script>
</head>
<body>
<form action="" method="get">
<div id="mylist">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
</div>
<a href="javascript:" onclick="add()" />Add</a>
<input type="submit" value="Submit" />
</form>
</body>
</html>要试用它，请执行显而易见的操作:在IE中加载，单击添加，单击提交，查看地址栏中的内容。如果您取消注释add()中的最后一行，IE将突然停止报告field3。无论哪种方式，它在Firefox中都能正常工作。
有什么想法吗？一颗好奇的心想知道。(如果需要，我如何在那里添加文本，以一种便携的方式，这样IE就很高兴了？)
回答 3
Stack Overflow用户
发布于 2009-03-04 19:36:14
这是IE错误吗？
看起来是这样。当你通过DOM方法创建一个元素时，IE并不完全接受‘name’属性。这是因为元素确实提交了，但是如果你试图获得元素的‘innerHTML’表示，它就神秘地消失了。如果通过直接写入innerHTML来创建元素，则不会发生这种情况。
此外，如果您使用DOM级别0表单导航方法，如‘myform.elements.x.value’，则通过‘element’数组访问可能无法工作(类似于某些人误用的直接‘myform.x’访问)。无论如何，现在您可能更喜欢getElementById()。
因此，要么使用innerHTML，要么使用DOM方法；最好不要在创建表单域时混合使用它们。
这是documented (see ‘Remarks’)，并最终在IE8中修复。
在任何情况下，永远不要这样做：
div.innerHTML+= '...'；
这只是语法上的糖：
div.innerHTML= div.innerHTML+'...'；
换句话说，它必须序列化元素的整个子HTML内容，然后进行字符串连接，然后将新字符串重新解析回元素，丢弃所有原始内容。这意味着你丢失了任何不能序列化的东西:以及IE的假的、半创建的“名称”属性，这也意味着任何JavaScript事件处理程序、DOM侦听器或其他你附加到每个子元素的自定义属性。而且，不必要的序列化/解析周期也很慢。
Stack Overflow用户
发布于 2009-03-04 19:03:00
IE对于在运行时更改一些内置属性非常挑剔。例如，输入元素的名称在设置时不能更改。
如果我是你，我会尝试两件事：
- 不使用
setAttribute()，而是尝试显式设置name、type和value属性：
如果这不起作用，您可能需要在document.createElement()调用中包含所有这些属性：
var e = document.createElement("<input type='text' name='field'>");
这实际上可能会在某些浏览器中抛出异常。所以最好的跨浏览器方式是：
。
var e;
try {
e = document.createElement("<input type='text' name='field'>");
} catch (ex) {
e = document.createElement("input");
e.type = 'text';
e.name = 'field';
}
e.value = 'value';Stack Overflow用户
发布于 2009-03-04 20:26:41
谢谢你的回答，波本斯和列维克。使用这些，以及更多的实验，这是我的结论：
- 是的，这是一个IE错误。
- IE 8根据Microsoft修复了这个错误："Internet Explorer8和更高版本可以在运行时对用createElement方法动态创建的元素设置名称属性。“
- 错误是这样的:仅调用
e.setAttribute("name", "field3")来设置名称。如果元素没有发生任何其他事情，它将工作，但如果请求序列化，则名称不会序列化。因此，当我说innerHTML += " "强制序列化时，它丢失了名称，所以它在反序列化时不会被恢复。没有名字，在表单submission. - Workaround #1中不包含任何内容:即使面对serialization.
- Workaround #2，也可以使用
e = document.createElement("<input name='field3' />")：我可以像这样附加一个文本元素，而不是使用innerHTML +=添加文本。我曾想过一定有更好的添加文本的方法，现在我知道了：-)。
干杯,
--jsf
https://stackoverflow.com/questions/611932
复制相似问题
腾讯云开发者
