Solve - submit is not a function Error in JavaScript

Solve - submit is not a function Error #

The "submit is not a function" error occurs when the id or name attribute of an input submit element is set to "submit". To solve the error, remove or rename the id or name attribute on the input element.

typeerror submit is not a function

Here is an example of how the error occurs.

index.html

Copied!
<!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>

Notice that the input element has an id and name attributes set to "submit" - this is the cause of the error.

Here is the related JavaScript code.

index.js

Copied!
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);

What actually happens in our code is we override the value of form.submit to a field reference instead of a method because we've set the id attribute to "submit".

When you console.log form.submit, it should be a function and not a reference to a field in the form.

To solve the error, rename or remove the id and name attributes to not be set to "submit".

index.html

Copied!
<!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>

Now if you run the same JavaScript code everything will work as expected.

index.js

Copied!
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);

Notice that the value of form.submit is a function instead of a reference to the input field with type of submit.

In some rare scenarios, you might not be able to change or remove the id and name attributes. In that case, you can call the submit method on the HTMLFormElement interface.

index.html

Copied!
<!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>

Here is the related JavaScript code.

index.js

Copied!
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);

Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.

Solve - submit is not a function Error in JavaScript

Solve - submit is not a function Error #

Borislav Hadzhiev