3

我通过调试发现我不应该命名任何 Form Elements name="submit"，但即使在搜索之后我也没有找到任何好的解释为什么？

请参见下面的简单代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form action="javascript:alert('submitted');" method="post" id="test-form">
            <label>Name</label>
            <input type="text" name="name-field" value="" />
            <input type="submit" name="submit" value="Submit Button" /> <!-- name should not be "submit" -->
            <p><a href="javascript: document.getElementById('test-form').submit();">Submit Link</a></p>
        </form>
    </body>
</html>
  • 如果您在任何表单元素上按 Enter 或单击 提交按钮，它将起作用。

  • 如果你点击提交链接，将会有错误

    未处理的错误：'document.getElementById('test-form').submit' 不是函数

如果您只是将您的提交按钮重命名为除此之外的任何其他名称name="submit"（即使您只是将其中的某些部分大写）或只是删除该name="submit"属性，那么提交按钮和提交链接都将起作用。

我在最新版本的 Internet Explorer、Firefox、Opera、Chrome 和 Safari 中进行了尝试。他们在这方面都有一致的行为。

正如您在我的代码示例中看到的，没有 jQuery 或任何其他 JavaScript 库的参与。

我将不胜感激。谢谢

4

3 回答 3

5

如果您在此处查看 Mozilla 文档：https ://developer.mozilla.org/en-US/docs/DOM/HTMLFormElement

你会看到表单有一个.submit()方法。

此外，表单还填充了表单中的字段。

（这里有一个例子： http: //www.devbay.com/articles/javascript/accessing-form-elements-array-with-javascript/ 我找不到任何应该发生的参考，只有它确实发生了。）

因此，当您创建一个称为submit它的元素时，它会覆盖表单的内置submit()方法——并且由于该元素不是函数，因此您会收到该错误消息。

于 2012-09-04T22:27:52.303 回答
2

假设您的表单已命名"foo"并且您有一个字段"firstName"。

foo.firstName是表单中的那个字段。

foo.submit()将提交该表单，因为submit它是表单上的一种方法。

如果您重新定义submit为表单域，您将覆盖该submit方法。

于 2012-09-04T22:27:52.697 回答
1

submit 将是表单输入类型，我认为它也用作 javascript 中的标识符。因此，将提交按钮命名为“提交”会使 javascript 中“提交”的使用变得模棱两可

于 2012-09-04T22:27:11.487 回答