IE不提交动态添加的表单元素

问题描述 投票：9回答：3

我写了一些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很开心？）

javascript internet-explorer webforms dhtml
3个回答
7
投票

这是IE漏洞吗？

似乎如此。当您通过DOM方法创建<input>元素时，IE不会完全选择“name”属性。元素确实提交了，但是如果你试图获得元素的'innerHTML'表示，它就会神秘地消失。如果通过直接写入innerHTML来创建元素，则不会发生这种情况。

此外，如果您使用DOM Level 0表单导航方法，例如'myform.elements.x.value'，则通过'elements'数组访问可能不起作用（类似于直接'myform.x'访问某些人误导使用）。在任何情况下，您可能更喜欢getElementById（）。

所以要么使用innerHTML，要么使用DOM方法;最好不要在创建表单字段时混合它们。

这是documented (see ‘Remarks’)，最后在IE8中修复。

无论如何，永远不要这样做：

div.innerHTML + ='...';

这只是语法糖：

div.innerHTML = div.innerHTML +'...';

换句话说，它必须序列化元素的整个子HTML内容，然后执行字符串连接，然后将新字符串重新解析回元素，丢弃所有原始内容。这意味着你丢失了任何无法序列化的东西：以及IE伪造的半创建'name'属性，这也意味着任何JavaScript事件处理程序，DOM Listeners或你附加到每个子元素的其他自定义属性。此外，不必要的序列化/解析周期很慢。

3
投票

IE在运行时更改某些内置属性非常挑剔。例如，设置时无法更改输入元素的名称。

如果我是你，我会尝试两件事：

  1. 而不是使用setAttribute()，尝试明确设置name，type和value属性： e.name = "text";
  2. 如果这不起作用，您可能必须将所有这些属性包含在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';
3
投票

谢谢你bobince和levik的答案。使用这些，以及一些更多的实验，这是我的结论：

  1. 是的，这是一个IE错误。
  2. IE 8根据Microsoft修复了这个错误：“Internet Explorer 8及更高版本可以在运行时在使用createElement方法动态创建的元素上设置NAME属性。”
  3. 错误是这样的：调用e.setAttribute("name", "field3")只设置名称。如果元素没有其他任何内容，它将起作用，但如果请求序列化，则名称不会序列化。因此，当我说innerHTML += " "强制序列化时，它失去了名字，因此在反序列化时没有恢复。没有名称，也没有包含在表单提交中。
  4. 解决方法＃1：即使面对序列化，e = document.createElement("<input name='field3' />")也能正常工作。
  5. 解决方法＃2：我可以添加如下文本元素：div.appendChild(document.createTextNode(" "));，而不是使用innerHTML + =添加文本。我认为必须有更好的方法来添加文字，现在我知道了:-)。

干杯， --jsf

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.