Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >IE未提交动态添加的表单元素

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

Stack Overflow用户
提问于 2009-03-04 10:50:15
回答 3查看 10.6K关注 0票数 9

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

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

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

以下是简化的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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就很高兴了?)

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2009-03-04 11: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侦听器或其他你附加到每个子元素的自定义属性。而且,不必要的序列化/解析周期也很慢。

票数 7
EN

Stack Overflow用户

发布于 2009-03-04 11:03:00

IE对于在运行时更改一些内置属性非常挑剔。例如,输入元素的名称在设置时不能更改。

如果我是你,我会尝试两件事:

  1. 不使用setAttribute(),而是尝试显式设置nametypevalue属性:

如果这不起作用,您可能需要在document.createElement()调用中包含所有这些属性:

var e = document.createElement("<input type='text' name='field'>");

这实际上可能会在某些浏览器中抛出异常。所以最好的跨浏览器方式是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
EN

Stack Overflow用户

发布于 2009-03-04 12:26:41

谢谢你的回答,波本斯和列维克。使用这些,以及更多的实验,这是我的结论:

  1. 是的,这是一个IE错误。
  2. IE 8根据Microsoft修复了这个错误:"Internet Explorer8和更高版本可以在运行时对用createElement方法动态创建的元素设置名称属性。“
  3. 错误是这样的:仅调用e.setAttribute("name", "field3")来设置名称。如果元素没有发生任何其他事情,它将工作,但如果请求序列化,则名称不会序列化。因此,当我说innerHTML += " "强制序列化时,它丢失了名称,所以它在反序列化时不会被恢复。没有名字,在表单submission.
  4. Workaround #1中不包含任何内容:即使面对serialization.
  5. Workaround #2,也可以使用e = document.createElement("<input name='field3' />"):我可以像这样附加一个文本元素,而不是使用innerHTML +=添加文本。我曾想过一定有更好的添加文本的方法,现在我知道了:-)。

干杯,

--jsf

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/611932

复制
相关文章
动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户。 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识别的条件分别拼接并保存到数据库。专家可以点击 + 添加条件,多个条件之间是并且的关系。 问题的关键在于动态添加表单和如何获取表单的text和value分别根据要求进行拼接。 首先是添加表单,这个很简单: $("#addform").click(function () {
二十三年蝉
2018/03/29
3.6K0
动态增加表单元素并获取元素的text和value提交
JS动态添加表单
<script type=”text/javascript”> function addRow()<!–js实现添加一行内容!–> { var tr=document.createElement(“tr”); var td=document.createElement(“td”); var input=document.createElement(“input”); input.setAttribute(“type”,”file”); input.setAttribute(“name”,”image[]”)
苦咖啡
2018/05/07
13.8K0
ElementUI动态添加表单项
chao超的搬运文章
2023/10/15
2990
IE6利用Javascript进行表单提交遇到的问题
状况是这样的:利用一个超链接进行表单的提交<a href="javascript:void(0);" onclick="submitForm()">提交表单</a>
大江小浪
2018/07/25
7030
vue的form表单提交_axios提交表单
利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象,
全栈程序员站长
2022/11/10
6.6K0
javascript:FF/Chrome 与 IE 动态加载元素的区别
今天在写一段js时,发现IE与FF在动态加载Html元素时,有一些差别,看下面的代码: <!doctype html> <html> <head> <title>ff 与 ie 动态加载元素的区别</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style type="text/css"> li{margin:0;padding:0;list-style:none} </style> <sc
菩提树下的杨过
2018/01/23
1.6K0
javascript:FF/Chrome 与 IE 动态加载元素的区别
javascript动态添加元素
<!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”Generator” content=”EditPlus®”> <meta name=”Author” content=””> <meta name=”Keywords” content=””> <meta name=”Description” content=””> <title>Document</title> </head> <body> <script> function addLiElement() { var liElement = document.createElement(‘li’); //liElement.innerHTML = ‘这是新增的li元素’; var labelElement = document.createElement(‘label’); var inputElement = document.createElement(‘input’); labelElement.innerHTML = ‘单号:’ inputElement.setAttribute(‘name’, ‘expressNumber’); liElement.appendChild(labelElement); liElement.appendChild(inputElement); var ulElement = document.getElementById(‘myid’); ulElement.appendChild(liElement); } </script> <ul id=”myid”> <li>aa</li> <li>bb</li> </ul> <p> <button onClick=”addLiElement();”>动态添加标签</button> </p> </body> </html>
全栈程序员站长
2022/06/25
1.9K0
js 动态添加元素
该例子的样式用的是easyui的样式,看不懂只需把class="easyui-XXX" 删除即可 <div class="fitem" id="urls" style="margin-bottom:5px;"> <label>url:</label> <input id="url" name="url" class="easyui-textbox" style="width: 260px" > 小标题: <input id="url_title" name="url_titl
黄啊码
2020/05/29
19.7K0
js 动态添加元素
表单提交原理_防止表单重复提交
<form>标签的属性enctype设置以何种编码方式提交表单数据。可选的值有三个:
全栈程序员站长
2022/11/08
5.5K0
java表单提交方法_表单提交的几种方式[通俗易懂]
说明:用户提交按钮或图像按钮时,就会提交表单。使用或都可以定义提交按钮,只要将其特性的值设置为“submit”即可,而图像按钮则是通过的type特性值设置为”image”来定义的。因此,只要我们单击一下代码生成的按钮,就可以提交表单。
全栈程序员站长
2022/09/30
5K0
如何实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?
前端老道
2022/03/29
4K0
原生js动态添加元素
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152106.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
6.8K0
表单提交
在html中经常用到<form>标签。而我们在使用过程会经常这样用<input name=”sub” type=”submit” value=”提交” /> 也就是说当我们点击提交的时候会执行<form action=”file.php” method=”get” id=”se” name=”se”>action的动作(例子是提交到file.php页面)方法是get。 当没有提交按钮时而是用一个热图加onclick属性来完成,我们可以这样用 <form id=”search” name=”search”
苦咖啡
2018/05/07
4.4K0
Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能
最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。
朱季谦
2023/07/10
5K0
form表单添加验证码并当验证通过后再提交表单
意思就是,form表单中添加一个验证码验证,然后当点击提交时先核验验证码是否正确,如果正确再提交数据,否则不提交。
岳泽以
2023/04/27
1.6K0
Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能
最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。
朱季谦
2023/07/21
6K0
Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能
form实现表单提交的各种方法(表单提交源码)
这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:
全栈程序员站长
2022/08/01
5.7K0
js form表单提交(jsp form表单提交方式)
最近工作比较忙,着急上线,写个简单的东西吧 url为你要提交的地址 params 为你提交的参数
全栈程序员站长
2022/07/30
14.8K0
动态添加的html元素绑定事件的方法
在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二;
蓓蕾心晴
2018/07/24
3.5K0
javaScript动态添加Li元素「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152096.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
2.2K0

相似问题

IE不会提交动态添加的表单域

14

AJAX动态添加的表单未提交

10

Jquery -未提交的动态表单元素

12

动态添加表单元素后提交表单

20

动态表单未提交

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文