IE6中Form.submit不提交的问题

IE6下JS提交Form问题
本文探讨了在Internet Explorer 6中使用JavaScript提交表单遇到的问题及解决方案。通过分析发现,IE6对于带有href属性的<a>标签与form的action属性冲突导致无法正常提交。文章提供了两种有效解决方法。

BUG描述

 

页面是用JavaScript准备数据填写Form然后提交。然而,在IE6下通过JavaScript提交数据时页面没有反应(也没有提示)!?奇怪的是,在FireFox/Opera下面一切正常。

 

BUG分析

 

首先:接到BUG后,先在测试机上重现了BUG,了解测试人员的操作步骤,然后在研发的机子上重现BUG

其次:对BUG进行了跟踪。

起初认为是程序的那个地方有逻辑错误,检查代码无误。尝试用多种浏览器测试,发现在IE7/8FireFoxOpera360浏览器下正常,唯独IE6下不正常, 所以排除了逻辑错误这个原因;

上网搜索发现IE6下如果是用<input type="submit"/>按钮,则能正常提交数据,若是通过JavaScript脚本:formElement.submit(),则会提交失败,网上提出了使用setTimeout()的办法来解决;

进一步深入发现, <a/>有个链接属性 href , form也有一个页面请求属性 action, 当两属性同时存在时, 点击<a/>当然会优先<a/>href链接,但如果是 <a href="javascript:;" ></a>, 又会是什么情况呢? 实践证明IE7.0+ , FF3.0+, Opera9.6+ 均能正确处理, 忽略<a/>href, 执行表单的submit动作, 唯有 IE6 仍坚持着自己的原则, 只要有 href , 就只尝试执行链接 href , 除非你的<a/>标签中去掉 href属性, 但去掉 href 你将发现IE 下将不会出现下划线;看来是因为 ie6 执行默认动作引起来,目前两种解决方法:

 

第一种方法:

<a class="bt_3"  style="cursor:pointer;" id="btnSubmit1" onclick="submitPage()">提交</a>  

这种方法根本没有href属性,用style="cursor:pointer;" 产生手型图标来模拟。

另一种方法:

<a class="bt_3"   href="javascript:void(0)"  id="btnSubmit1" onclick="submitPage();return false;">提交</a>  

onclick 返回 false ,阻止浏览器的默认行为。也可以达到相同的目的

 

在使用 JavaScript 提交表单时,开发者可能会遇到 `form.submit is not a function` 这一错误。此问题通常出现在某些浏览器(如 FireFox、360、IE8)中,尽管代码看起来是正确的,但依然报错。错误的根本原因与表单元素的命名冲突有关。 如果表单中存在一个 `name="submit"` 或 `id="submit"` 的元素,例如 `<input type="submit" name="submit" id="submit">`,浏览器会将该元素覆盖表单对象的 `submit()` 方法,导致无法调用原始的提交方法。这种情况下,调用 `form.submit()` 将触发表单提交,而是返回对该元素的引用[^2]。 ### 解决方案 1. **避免使用 `submit` 作为表单子元素的 `name` 或 `id`** 修改表单中提交按钮的 `name` 或 `id` 属性,避免与原生方法名冲突。例如: ```html <input type="submit" id="formSubmit" value="Submit"> ``` 同时,在 JavaScript 中调用 `form.submit()` 时,确保使用的是表单对象本身,而是被覆盖的元素引用[^1]。 2. **使用 `document.getElementById` 获取表单对象** 确保获取的是 `<form>` 元素本身,而是通过 `document.forms` 或其他方式获取的引用。例如: ```javascript const form = document.getElementById('myForm'); form.addEventListener('submit', function (event) { event.preventDefault(); // 阻止默认提交行为 if (validateForm()) { form.submit(); // 安全调用 submit 方法 } }); ``` 3. **避免在 jQuery 和原生对象之间混淆使用** 如果使用 jQuery 操作表单,确保将原生 DOM 对象转换为 jQuery 对象。例如: ```javascript const $form = $('#myForm'); $form.on('submit', function (event) { event.preventDefault(); if (validateForm()) { $form.get(0).submit(); // 调用原生 submit 方法 } }); ``` 或者在 AJAX 提交时避免使用 `form.submit()`,而是通过 `$.ajax()` 发送数据[^4]。 4. **使用 `requestSubmit()` 方法替代** HTML5 提供了 `requestSubmit()` 方法,该方法可以触发表单提交,而会受到命名冲突的影响: ```javascript const form = document.getElementById('myForm'); form.requestSubmit(); // submit 元素命名影响 ``` 该方法适用于现代浏览器,且会覆盖表单的 `onsubmit` 事件处理程序[^2]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值