Ошибка submit is not a function

HTML Forms have some really strange JavaScript behavior. We’ll often want to add JavaScript to enhance form controls and actions, but sometimes weird things happen, like the submit function disappearing.

Breaking down the Message

TypeError: form.submit is not a function

TypeError is a subset of JavaScript Error that is thrown when code attempts to do something that does not exist on the target object.

This message indicates that our code expects to have an object with a submit function. But if the property exists, it was not a function. In this case, we had a reference to a HTMLFormElement, which should have a submit function on its prototype.

This is a blocking error, and script execution will stop when this error occurs.

Understanding the Root Cause

Let’s say you have a simple contact form on your website, like this:

<form action="/contact" method="POST" id="myForm">
  <input type="text" name="name" placeholder="Name" />
  <input type="submit" name="submit" value="Submit" />
</form>

All is well until we try to attach some JavaScript to this form. If we need to inject some asynchronous action before the submit fires, like an AJAX lookup or send an analytics event, the code might look something like:

var form = document.querySelector("#myForm");
form.addEventListener("submit", function (evt) {
  //... do something cool.
  form.submit();
});

Boom. TypeError: form.submit is not a function

Wait, what? How is form.submit not a function? MDN says its a function, WHAT IS EVEN GOING ON? Then we see, hidden in the text is this really important and interesting line:

If a form control has a name or id of submit it will mask the form’s submit method.

Any named form control can be accessed as a property on the form object. In the example above form.name would reference the Name HTMLInputElement. But we also gave our submit button a name too, so rather than being the submit() function we want, it gives us a reference to the HTMLInputElement for submit.

HTMLFormElement is just trying to be helpful, but this is really weird. What happens if we do other important properties, like class or id?

<form class="form-control" id="myForm">
  <input name="id" />
  <input name="className" />
</form>
<script>
  var form = document.querySelector("#myForm");
  form.id; // => <input name="id" />
  form.className // => <input name="className" />
</script>

That feels like a bug waiting to happen. Even more weird, if we set the properties, like form.id = "foo";, that still works, even though we cannot get the value because it has been hidden by the input control.

How to Fix It

This is super weird. How do we avoid these problems? How should we be submitting forms and accessing properties?

1. Access the Prototype and Attributes Directly

Despite the simplicity of using form.submit or form.id, we should be more explicit about what we want to do. submit is a function on the prototype, so we should call it there:

var form = document.querySelector('form.my-form');
HTMLFormElement.prototype.submit.call(form);

Similarly, if we want to access attributes on the form element like id or action, we should use getAttribute():

var form = document.querySelector('form.my-form');
var id = form.getAttribute('id');
var action = form.getAttribute('action')

2. Monitor Your Environment

You’ll need to make sure that the issue is really fixed and that the problem stops happening. Mistakes happen, APIs change, and users are unpredictable. Just because your application works today, doesn’t mean an error won’t be discovered tomorrow. Tracking when exceptional events happen to your users gives you the context to understand and fix bugs faster. Check out TrackJS Error Monitoring for the fastest and easiest way to get started.

The “TypeError: form.submit is not a function” in JavaScript is a common error when we work with a form element. To see the causes and the solutions, read from the beginning to the end of this article.

When does the “TypeError: form.submit is not a function” in JavaScript occur?

This error appears when you use the ‘submit’ value assigned to the name and id of the button or input in the form element. Unfortunately, this ‘submit’ value matches the submit() attribute in the form element, so JavaScript cannot call the submit() function. Look closely at the example below to understand the main cause of the error.

Index.html:

<body>
    <main>
      <p style="display: none">Form is submitted!</p>
      <form id="my-form" action="#" method="post">
        <input
          class="input-text"
          type="text"
          name="text"
          value="learnshareit.com"
        />
        <button name="submit" id="submit" class="btn">Submit</button>
      </form>
    </main>
    <script type="module" src="script.js"></script>
</body>

Script.js:

const form = document.getElementById('my-form');
const button = document.querySelector('.btn');

// Prevent redirect
form.addEventListener('submit', function (e) {
  e.preventDefault();
});

button.onclick = function () {
  // Error: form.submit is not a function
  form.submit();
};

// Show message if successful submit
const query = window.location.search;
if (query.includes('text')) {
  document.querySelector('p').style.display = 'block';
  form.text.value = '';
}

Output:

TypeError: form.submit is not a function

How to fix this error?

Don’t use ‘submit’ for name and id

Fixing this error is very simple. Just remember not to use the ‘submit’ value for the id or name of any element in the form. In our case, change the name and id to something else.

Index.html:

<body>
  <main>
    <p style="display: none">Form is submitted!</p>
    <form id="my-form" action="" method="GET">
      <input
        class="input-text"
        type="text"
        name="text"
        value="learnshareit.com"
      />

      <!-- changed name and id -->
      <button name="submit-btn" id="submit-btn" class="btn">Submit</button>
    </form>
  </main>
  <script type="module" src="script.js"></script>
</body>

Script.js:

const form = document.getElementById('my-form');
const button = document.querySelector('.btn');

// Prevent redirect
form.addEventListener('submit', function (e) {
  e.preventDefault();
});

button.onclick = function () {
  form.submit();
};

// Show message if successful submit
const query = window.location.search;
if (query.includes('text')) {
  document.querySelector('p').style.display = 'block';
  form.text.value = '';
}

Output:

Use call() method

Syntax:

function.call(object, arg1, arg2, ...);

Description:

The call() method allows you to call a function and pass into it an object and arguments. At this point, this keyword in the function will refer to the object.

The cause of the error is that JavaScript calls a function on a button named submit. So we will not call the function normally anymore but will use the call() method to call the submit() function in the HTMLFormElement Prototype. Like this:

Index.html:

<body>
  <main>
    <p style="display: none">Form is submitted!</p>
    <form id="my-form" action="" method="GET">
      <input
        class="input-text"
        type="text"
        name="text"
        value="LearnShareIT"
      />

      <!-- Using "submit" value for name and id -->
      <button name="submit" id="submit" class="btn">Submit</button>
    </form>
  </main>
  <script type="module" src="script.js"></script>
</body>

Script.js:

const form = document.getElementById('my-form');
const button = document.querySelector('.btn');

// Prevent redirect
form.addEventListener('submit', (e) => {
  e.preventDefault();
});

button.onclick = function () {
  // Directly call submit() in HTMLFormElement Prototype
  HTMLFormElement.prototype.submit.call(form);
};

// Show message if successful submit
const query = window.location.search;
if (query.includes('text')) {
  document.querySelector('p').style.display = 'block';
  form.text.value = '';
}

Output:

Summary

In this article, we have looked at the leading cause of the “TypeError: form.submit is not a function” in JavaScript. Then, we have shown two simple ways to solve this error. Hopefully, this article will be helpful to you. Thank you for reading!

Maybe you are interested:

• Get the Status Code of a Fetch HTTP Response using JavaScript
• TypeError: getElementById is not a function in JavaScript
• Clear Input fields after Submit using JavaScript

When we try to submit a form with JavaScript, we get an error «.submit is not a function» shown.

<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">

<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">

</form>

<script type="text/javascript">
    function submitAction()
    {
        document.frmProduct.submit();
    }
</script>

Also this code:

<script type="text/javascript">
    function submitAction()
    {
        document.forms["frmProduct"].submit();
    }
</script>

Shows the same error.

submit is not a function means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.

Let the button handle which form object to use:

onclick="return SubmitForm(this.form)"

and with the js:

function SubmitForm(frm) {
    frm.submit();
}

If you have no opportunity to change name=»submit» you can also submit form this way:

function submitForm(form) {
    var submitFormFunction = Object.getPrototypeOf(form).submit;
    submitFormFunction.call(form);
}

Use:

var enviar = document.getElementById("enviar");
enviar.type = "submit";