IE中使用JavaScript中调用form.submit()提示“对象不支持此属性和方法”问题研究 [疑难杂症]

post by 朦朧中的罪惡 / 2008-8-20 17:32 Wednesday

今天在项目中无意中遇到的一个神奇的问题，特此记录。 

首先我们看看以下代码，测试页面可以看这里,页面的功能和逻辑很简单。

这段代码从逻辑上看没有任何错误和BUG，理论上是可以完全执行的。

<html>
    <head>IE 测试</head>
<body>
<script language="javascript">
/*
======================================
    IE 下 submit 重名测试
    作者：朦朧中的罪惡
    博客：http://be-evil.org
======================================
*/
function dosubmit()
{
    var theform = document.getElementById('theform');
    theform.submit();
}
</script>
    <form method="post" id="theform">
        <table width="800">
            <tr>
                <td><input type="text" value="测试"></td>
            </tr>
            <tr>
                <td><input type="button" name="submit" value="提交" onclick="dosubmit()"></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

 

==================================================================

本文系原创文章，转载请注明文章源自思想之地 http://be-evil.org，作者：朦胧中的罪恶

==================================================================

如果用Firefox查看这个页面并点击提交按钮，表单会正常提交，但是我们换到IE下面，IE却会提示“对象不支持此属性和方法“ 而停止提交的操作。

这是怎么回事呢？经过我多方的查找资料，发现是提交按钮的name="submit"的属性在捣乱。

此时我们将theform.submit();注释掉，新起一行输入alert(theform.submit.value);刷新页面后再次点击提交，弹出的窗口上会显示”提交“两个字，神奇了！theform.submit居然是提交按钮而不是theform的方法了!

为什么会出现这个问题呢，因为在IE下可以通过 表单.表单元素名称 这样的方式获得一个表单下的所有表单元素，但是巧就巧在这里，如果某个表单元素的名称和表单的方法名重名的话那么IE就会优先将名称解析为某个表单元素，而不是表单的方法，此时就会出现这个神奇的问题了。

标签: JavaScript 原创

« Zend Framework在II7环境下的配置手记 | 聪明的搜索引擎..»

引用：

评论

  1. terry Says:
    2010-07-19 17:57

    直接提交就OK了..绕个圈干嘛?

    博主回复：你在说什么...

  2. qinhm Says:
    2010-04-28 18:25

    瞎说什么啊？不明白就不要说了，有没有；都一样，

    name="submit"　把submit　改成别的就行了，如，button、submit1等

  3. 打酱油的 Says:
    2010-01-15 09:08

    调用 js 方法 后面 要有  ；

  4. xx Says:
    2009-11-06 09:35

    好啊，是这么回事儿

  5. 11 Says:
    2009-09-29 10:58

    多谢

  6. dd Says:
    2009-03-31 17:05

    thanks

  7. wangts Says:
    2009-03-31 10:18

    八错

  8. tiom Says:
    2008-11-25 17:16

    多谢啦

发表评论