JavaScript：当函数被称为“提交”时，表单 onSubmit 不起作用答案

【问题标题】：JavaScript: Form onSubmit does not work when function is called 'submit'JavaScript：当函数被称为“提交”时，表单 onSubmit 不起作用
【发布时间】：2014-08-09 20:26:45
【问题描述】：

我试图在单击表单的提交按钮时调用 JavaScript 函数。

由于某种原因，当它被命名为“提交”时，该函数不会被调用，但当它被命名为其他任何东西时，它就可以工作。

我还应该注意，当按钮从表单标签中取出时，该功能也可以工作。

谁能解释一下为什么当它在表单中时不能使用该名称？

代码如下：

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript"> 
            function submit(){
               console.log('test');
            }
        </script>
    </head>     
    <body>
        <form>
            <input type="text"/>
            <input type="submit" onclick="submit()"/>
        </form>
    </body>
</html>

【问题讨论】：

标签： javascript html forms

【解决方案1】：

因为submit()是核心JS中提交表单的保留函数。

例如，如果您的表单有一个像myform 这样的 id，您可以这样做以通过 JS 提交：

document.form['myform'].submit();

因此，调用该函数实际上是在提交表单，而不是调用自定义函数。

编辑：我忘了说，它只在表单内部工作，因为它正在调用该表单的提交函数。它不再可用（因为body标签没有提交功能）。

【讨论】：

此外，提交按钮将根据该表单标签的属性进行提交，因此最符合要求的方法是删除 onclick 并添加 onsubmit="myFunction(); return false"
@evan.stoddard——不，不会。调用表单的提交方法不会调度提交事件，因此不会调用提交侦听器。
@RobG 谢谢。我读得太快了，错过了重点。我虽然 OP 想使用自定义方法来做类似 ajax 的事情。我很抱歉。

【解决方案2】：

表单元素被放置在表单内监听器的作用域链上，就像通过：

with (form) {
  /* run listener code */
}

所以标识符 submit 首先在处理程序的上下文中解析，然后在范围链其余部分之前的表单上解析。这是表单所独有的，可以在以下内容中看到：

<form>
  <input name="foo">
  <input type="button" value="Do click" onclick="
    function submit(){console.log('click')};
    submit();
  ">
</form>

点击按钮运行监听器中的提交函数，删除函数声明运行表单的提交方法。这是表单独有的。

请注意，当直接调用表单的提交方法时，不会调用其提交处理程序。

在表单之外，标识符submit以正常方式解析。

【讨论】：