IE不会提交动态添加的表单元素 [英] IE is not submitting dynamically added form elements
问题描述
我写了一些JavaScript来编辑HTML表单中的项目列表，包括添加和删除项目.在Firefox中可以使用了.在Internet Explorer中尝试时，我发现未使用该表单提交任何添加的项目.
I wrote some JavaScript to allow editing a list of items within an HTML form, including adding and removing items. Got it working in Firefox. When trying it in Internet Explorer, I found that any added items were not being submitted with the form.
长话短说...经过大量的简化，调试，弄清楚了是哪行触发IE忽略了新表单输入.这样就解决了行为问题.
Long story short... lots of simplification, debugging, figured out what line is triggering IE to ignore the new form input. So the behavior problem is solved.
但是现在我必须问:为什么?这是IE错误吗?
But now I must ask: Why? Is this an IE bug?
这是简化的代码:
<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中无论哪种方式都可以正常工作.
To try it out, do the obvious: load in IE, click Add, click Submit, look what's in the address bar. If you uncomment the last line in add(), IE will suddenly stop reporting field3. It works fine either way in Firefox.
有什么想法吗?好奇的心想知道. (如果需要，我将如何以可移植的方式在其中添加文本，以使IE感到满意?)
Any ideas? A curious mind wants to know. (And how would I add text there if needed, in a portable fashion, so IE is happy?)
推荐答案
这是IE错误吗?
Is this an IE bug?
似乎如此.通过DOM方法创建< input>元素时，IE不会完全选择'name'属性.某种程度上来说，元素确实可以提交，但是如果您尝试获取元素的"innerHTML"表示形式，它就会神秘地消失.如果您通过直接写入innerHTML创建元素，则不会发生这种情况.
Seems so. When you create an <input> element through DOM methods, IE doesn't quite pick up the ‘name’ attribute. It's sort-of-there in that the element does submit, but if you try to get an ‘innerHTML’ representation of the element it mysteriously vanishes. This doesn't happen if you create the element by writing directly to innerHTML.
此外，如果您使用DOM Level 0表单导航方法(例如"myform.elements.x.value")，则无法通过"elements"数组进行访问(类似，某些人误用的直接"myform.x"访问) .无论如何，这几天您可能更喜欢getElementById().
Also if you use DOM Level 0 form navigation methods, like ‘myform.elements.x.value’, access through the ‘elements’ array may not work (similarly the direct ‘myform.x’ access some people misguidedly use). In any case these days you might prefer getElementById().
因此 使用innerHTML 或使用DOM方法；创建表单字段时最好不要混合它们.
So either use innerHTML or use DOM methods; best not to mix them when creating form fields.
这已记录下来(请参见备注")并最终在IE8中修复.
This is documented (see ‘Remarks’) and finally fixed in IE8.
无论如何都不要做:
div.innerHTML + ='...';
div.innerHTML+= '...';
这仅是以下方面的语法糖:
This is only syntactical sugar for:
div.innerHTML = div.innerHTML +'...';
div.innerHTML= div.innerHTML+'...';
换句话说，它必须序列化元素的整个子HTML内容，然后进行字符串连接，然后将新的字符串重新解析回元素，从而丢弃所有原始内容.这意味着您将丢失所有无法序列化的内容:以及IE伪造的一半创建的名称"属性，这也意味着您已附加到每个子元素的任何JavaScript事件处理程序，DOM侦听器或其他自定义属性.另外，不必要的序列化/解析周期很慢.
In other words it has to serialise the entire child HTML content of the element, then do the string concatenation, then re-parse the new string back into the element, throwing away all the original content. That means you lose anything that can't be serialised: as well as IE's bogus half-created ‘name’ attributes that also means any JavaScript event handlers, DOM Listeners or other custom properties you have attached to each child element. Also, the unnecessary serialise/parse cycle is slow.
这篇关于IE不会提交动态添加的表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
