JavaScript 中 TypeError: form.submit is not a function 错误
当输入提交元素的 id 或 name 属性设置为“submit”时，会发生“TypeError: submit is not a function”错误。
要解决该错误，请删除或重命名输入元素上的 id 或 name 属性。
下面是错误如何发生的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<form id="create_user_form">
<input type="text" name="first_name" />
<!-- ⛔️ id and name set to "submit" -->
<input type="submit" id="submit" name="submit" />
</form>
<script src="index.js"></script>
</body>
</html>
请注意，输入元素的 id 和 name 属性设置为“submit”——这是错误的原因。
这是相关的 JavaScript 代码。
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ⛔️ TypeError: form.submit is not a function
form.submit();
}
form.addEventListener('submit', onSubmit);
在我们的代码中实际发生的是我们将 form.submit 的值覆盖为字段引用而不是方法，因为我们已将 id 属性设置为“submit”。
当我们使用 console.log 打印 form.submit 时，它应该是一个函数而不是对表单中字段的引用。
要设置 id 和 name 属性来提交
要解决该错误，请重命名或删除 id 和 name 属性，使其不设置为“submit”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<form id="create_user_form">
<input type="text" name="first_name" />
<!-- ✅ Renamed id and name attributes -->
<input type="submit" id="submitBtn" name="submitBtn" />
</form>
<script src="index.js"></script>
</body>
</html>
现在，如果我们运行相同的 JavaScript 代码，一切都会按预期运行。
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ submit() {}
form.submit();
}
form.addEventListener('submit', onSubmit);
请注意，form.submit的值是一个函数，而不是对具有提交类型的输入字段的引用。
直接在HTMLFormElement接口上调用提交方法
在极少数情况下，我们可能无法更改或删除 id 和 name 属性。 在这种情况下，我们可以调用 HTMLFormElement 接口上的提交方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<form id="create_user_form">
<input type="text" name="first_name" />
<!-- ⛔️ Stuck with `id` and `name` set to submit -->
<input type="submit" id="submit" name="submit" />
</form>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
即使访问表单元素上的提交属性指向提交输入元素而不是方法，我们仍然可以通过访问 HTMLFormElement 接口上的提交属性来提交表单。
总结
当输入提交元素的 id 或 name 属性设置为“submit”时，会发生“TypeError: submit is not a function”错误。
要解决该错误，需要删除或重命名输入元素上的 id 或 name 属性。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
