JavaScript 中 TypeError: form.submit is not a function 错误

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中 TypeError: form.submit is not a function 错误

作者：迹忆客最近更新：2023/01/21 浏览次数：

当输入提交元素的 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>

JavaScript 中 TypeError- form.submit is not a function 错误

请注意 ，输入元素的 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);