Borislav Hadzhiev
Wed Oct 20 2021·2 min read
Photo by Joseph Pearson
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.
Here is an example of how the error occurs.
<!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.
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"
.
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"
.
<!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.
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.
<!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.
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.