`
hejiajunsh
  • 浏览: 408980 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

为了你的幸福,请不要把提交按钮(type=button)的name或者id设置为submit

阅读更多

 

使用JavaScript中调用form.submit()不能提交或在IE中提示“对象不支持此属性和方法”问题

<html>
    <head>test</head>
<body>
<script language="javascript">
function dosubmit()
{
var myform = document.getElementById('myform');
myform.submit();
}
</script>
    <form method="post" id="myform">
                <input type="text" value="test" />
                <input type="button" name="submit" value="提交" onclick="dosubmit()" />        
    </form>
</body>
</html>

上述代码在chromium和IE上都不能正常提交,但当把提交按钮的type改为submit时,在用chromium查看这个页面并点击提交按钮,表单会正常提交,但是我们换到IE下面,IE也可提交但却会提示“对象不支持此属性和方法“ 的错误。

这是怎么回事呢?郁闷了我好一段时间,经过查找资料,发现是提交按钮的name="submit"和id="submit"的属性在捣乱。

当把提交按钮的name改成除了submit的其他名字时,提交按钮的type为button或者submit在chromium和ie上均可提交表单,为什么会出现这个问题呢,因为在IE下可以通过 表单.表单元素名称 这样的方式获得一个表单下的所有表单元素,但是巧就巧在这里,如果某个表单元素的名称和表单的方法名重名的话那么IE就会优先将名称解析为某个表单元素,而不是表单的方法,此时就会出现这个神奇的问题了。

 

此时submit已经变成 form 的一个属性了,并不是方法。这下明白了吧。把submit(也就是submit方法)覆盖了。所以要注意提交表单name的命名方式不要和form原有的方法,属性相同,这样会导致原来的form属性方法失效。

 

分享到:
评论

相关推荐

    JS中type=”button”和type=”submit”的区别

    当用户点击`type="submit"`的按钮或按下回车键时,表单会执行默认的提交行为,即调用`form.submit()`方法,将表单内所有具有`name`属性的元素作为键值对发送到服务器。值得注意的是,`type="submit"`按钮自身并不会...

    提交按钮的name='submit'引起的js失效问题及原因

    例如,在上述代码片段中,我们看到一个ID为"pquery"的表单,其中有一个`name="submit"`的提交按钮。如果用户点击这个按钮,浏览器可能会直接发起表单提交,而不是执行与该按钮相关的任何JavaScript事件处理函数,如`...

    形考任务六 HTML 表单用于搜集不同类型的用户输入,包括文本输入、单选按钮输入、提交按钮,达到效果入下图所示。.zip

    HTML表单通过`&lt;form&gt;`标签定义,它通常包含一个或多个表单控件,如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等,以及用于提交表单的`&lt;button&gt;`或`&lt;input type="submit"&gt;`元素。例如,一个基本的HTML表单结构如下: ```...

    浅析一个表单多个Submit按钮的简单实现方法

    1. **使用name属性和JavaScript事件处理**:为每个Submit按钮设置唯一的name属性,例如`&lt;input type="submit" name="action1" value="提交1"&gt;`和`&lt;input type="submit" name="action2" value="提交2"&gt;`。然后通过...

    用image来提交form不想使用button提交form.docx

    &lt;input type="image" src="submit_button.png" alt="Submit" name="submit"&gt; ``` 这里的`&lt;input type="image"&gt;`有两个默认属性:`x`和`y`,它们分别表示用户点击图像时的坐标。如果不需要这些坐标,可以在`...

    按钮的Ajax请求时一次点击两次提交的解决方法

    第一种解决方法是将按钮的type属性从submit改为button。这样做的好处是按钮不再触发表单的默认提交行为,代码示例如下: ```html &lt;input type="button" value="Create" id="submit" /&gt; ``` 使用type为button的按钮...

    发现一个HTML按钮

    当`&lt;input&gt;`标签的`type`属性设置为`submit`时,它将创建一个提交按钮。这个按钮的主要功能是提交表单数据到服务器进行处理。在描述中提到的`&lt;input type="submitQuery"&gt;`,虽然"submitQuery"不是一个标准的类型,但...

    input标签里面的name与value的区别

    这就是一个按钮) type可选的值如下: button 按钮 checkbox 复选按钮组件 file 文件上传组件 hidden 隐藏域 image 图片区域 password 密码输入文本框 radio 单选按钮组件 reset 重置表单按钮 submit 提交表单按钮 ...

    修改禁止多次重复提交

    &lt;button type="submit" id="submitBtn"&gt;提交&lt;/button&gt; document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认的表单提交行为 var btn = ...

    点击提交按钮后按钮变灰色不可用状态的三种方法

    &lt;input type="button" name="hui" id="hui" value="让提交按钮可用" onclick="document.form1.imageField.disabled=false" /&gt; function closebut() { document.form1.imageField.disabled=true; } ``` ...

    CSS 文本域和按钮对齐不一致解决方案

    文字要包含在label标签中,并设置行高,否则文字会与文本框的顶 端对齐。...input type=”submit” name=”button” id=”button” value=”提交” /&gt; &lt;/form&gt; //CSS 代码 复制代码代码

    PayPal网站标准集成指南

    - **按钮ID(hosted_button_id)**: PayPal为每个捐赠按钮分配了唯一的ID。 **3.4 “Donate”按钮的高级功能** - **定制金额(custom)**: 允许用户输入自定义的捐赠金额。 - **最小捐赠金额(min)**: 设置最小的捐赠...

    一个from表单提交多个功能

    需要注意的是,这些按钮的类型设置为`button`而不是`submit`,这是因为`submit`类型的按钮默认会触发表单的提交行为,而我们希望通过自定义函数来控制这个过程。 #### JavaScript实现 接下来是实现的核心部分——...

    js表单提交和submit提交的区别实例分析

    在这个例子中,`&lt;input type="submit"&gt;`按钮会触发表单的提交和执行`test()`函数,而`&lt;input type="button"&gt;`按钮则只会调用`test()`函数,并不会提交表单。`test()`函数中调用了`document.getElementById('myform')...

    php submit and read data simple example

    &lt;button type="submit" name="submit"&gt;Submit&lt;/button&gt; ``` 这里,`action`属性指定了表单数据应发送到的PHP脚本(myhandle.php),`method`属性定义了数据的传输方式(通常是GET或POST,这里使用POST)。 2. ...

    java 常用开发代码

    - 确认提示后提交:`&lt;input name="Submit4" type="button" id="Submit4" onClick="if(confirm('确定提交吗?\n'))form1.submit();"value="提交"&gt;` - 检查内容后提交:`&lt;input name="Submit3" type="button" id=...

    简单的js快速预约表单信息提交代码

    表单通常包括输入字段,如文本框(text input)、下拉菜单(select)、复选框(checkbox)、单选按钮(radio button)以及提交按钮(submit button)。例如: ```html &lt;form id="reservationForm"&gt; &lt;label for=...

    用image来提交form不想使用button提交form

    通常,我们使用`&lt;button&gt;`或`&lt;input type="submit"&gt;`标签来创建一个提交按钮,但有时为了美观,开发者可能会选择使用图像(image)作为提交按钮。本文将详细讲解如何使用图像提交表单,以及解决可能出现的重复提交...

    jQuery点击图标按钮弹出表单代码

    &lt;button type="submit"&gt;提交&lt;/button&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;script src="script.js"&gt; ``` 在这个例子中,我们使用了Font Awesome图标库(`&lt;i class="fa...

    使用HTML开发商业网站-表单控件-input课件.pptx

    6. **提交按钮 (submit)**: `&lt;input type="submit"&gt;` 用于提交表单数据到服务器。用户点击后,表单数据会被发送到指定的URL。 示例: ```html &lt;input type="submit" value="提交"&gt; ``` 7. **重置按钮 (reset)**...

Global site tag (gtag.js) - Google Analytics