IE 未提交动态添加的表单元素 [英] IE is not submitting dynamically added form elements

查看：34
本文介绍了IE 未提交动态添加的表单元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我编写了一些 JavaScript 来允许编辑 HTML 表单中的项目列表，包括添加和删除项目.让它在 Firefox 中工作.在 Internet Explorer 中尝试时，我发现任何添加的项目都没有与表单一起提交.

长话短说...大量的简化、调试、找出哪一行触发 IE 忽略新的表单输入.这样行为问题就解决了.

但现在我必须问:为什么?这是 IE 的错误吗?

这是简化的代码:

<头><title>测试</title><script type="text/javascript">函数添加(){div = document.getElementById("mylist");//*** 在此处添加文本效果很好.***div.innerHTML += " ";e = document.createElement("输入");e.setAttribute("类型", "文本");e.setAttribute("name", "field3");e.setAttribute("value", "--NEWVALUE--");div.appendChild(e);//*** 在此处添加文本在 Firefox 中非常有效，但对于//Internet Explorer 会导致 field3 不提交.***//div.innerHTML += " ";}<身体><form action="" method="get"><div id="mylist"><input type="text" name="field1" value="value1"/><input type="text" name="field2" value="value2"/>

<a href="javascript:" onclick="add()"/>添加</a><input type="submit" value="Submit"/></表单>

要尝试一下，请执行显而易见的操作:在 IE 中加载，单击添加"，单击提交"，查看地址栏中的内容.如果在add()中取消最后一行的注释，IE会突然停止报告field3.无论哪种方式，它都可以在 Firefox 中正常工作.

有什么想法吗?一个好奇的头脑想知道.(如果需要，我将如何以可移植的方式在那里添加文本，以便 IE 满意?)

解决方案

这是 IE 的错误吗?

好像是这样.当您通过 DOM 方法创建一个 元素时，IE 并没有完全选择name"属性.它有点像元素确实提交了，但是如果您尝试获得元素的innerHTML"表示，它会神秘地消失.如果您通过直接写入 innerHTML 来创建元素，则不会发生这种情况.

此外，如果您使用 DOM Level 0 表单导航方法，例如 'myform.elements.x.value'，则通过 'elements' 数组的访问可能不起作用(类似于某些人误用的直接 'myform.x' 访问).无论如何，现在您可能更喜欢 getElementById().

所以要么使用innerHTML要么使用DOM方法；创建表单域时最好不要混合使用.

这是记录在案(见备注") 并最终在 IE8 中修复.

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

<块引用>

div.innerHTML+= '...';

这只是语法糖:

<块引用>

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

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

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.

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.

But now I must ask: Why? Is this an IE bug?

Here is the simplified code:

<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>

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.

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?)

解决方案

Is this an IE bug?

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.

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().

So either use innerHTML or use DOM methods; best not to mix them when creating form fields.

This is documented (see ‘Remarks’) and finally fixed in IE8.

In any case, never do:

div.innerHTML+= '...';

This is only syntactical sugar for:

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

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆