How to solve “Submit is not a function” error in JavaScript ?
Last Updated :
01 Aug, 2024
Ever tried to submit a form, by using a JavaScript? But when you tried to submit the form by using JavaScript, you might be getting a “Submit is not a function” error in the code. Well, don’t panic as of yet. This article is being dedicated to solving that problem of yours.
So what are we waiting for? Let’s dig in.
Example: You will get "Submit is not a function" error in this.
html
<!DOCTYPE html>
<html>
<head>
<title>
“Submit is not a function”
error in JavaScript
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green">GeeksForGeeks</h2>
<h2 style="color:purple">
“Submit is not a function” error
</h2>
<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="CLICK HERE">
</form>
<script type="text/javascript">
function submitAction() {
document.frmProduct.submit();
}
</script>
</body>
<html>
The Error:
(The article continues after the image)
There are 5 different types of solution to this problem.
Solution 1:
Simply rename your button’s name to btnSubmit or any other name. Your code will miraculously work. This is because you have already named the submit button or any other element in the code as submit. When the button is named as submit, it is going to override the submit() function on this code.
btnSubmit
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
“Submit is not a function” error in JavaScript
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green">GeeksForGeeks</h2>
<h2 style="color:purple">
“Submit is not a function” error
</h2>
<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="CLICK HERE">
</form>
<script type="text/javascript">
function submitAction() {
document.frmProduct.btnSubmit();
}
</script>
</body>
<html>
Solution 2:
Simply let the button handle and decide which object of the form to be used.
onclick="return SubmitForm(this.form)"
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
“Submit is not a function”
error in JavaScript
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green">
GeeksForGeeks
</h2>
<h2 style="color:purple">
“Submit is not a function” error
</h2>
<form action="product.php" method="get"
name="frmProduct"
id="frmProduct"
enctype="multipart/form-data">
<input onclick="return SubmitForm(this.form)"
id="submit_value"
type="button"
name="submit_value"
value="CLICK HERE">
</form>
<script type="text/javascript">
function submitAction() {
document.frmProduct.submit();
}
</script>
</body>
<html>
Solution 3:
If there is no name=”submit” or id=”submit” in the form, make sure to remove or edit it. Also by making sure that there will no other form that is having the same name. This will give an error.
Solution 4:
If there are no changes in the output (still getting an error) by implementing the Solution 3 i.e. having a chance to change name=”submit” or id=”submit”, you could also prevent the error by making changes in the JavaScript.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
“Submit is not a
function” error in JavaScript
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green">
GeeksForGeeks
</h2>
<h2 style="color:purple">
“Submit is not a function” error
</h2>
<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="CLICK HERE">
</form>
<script type="text/javascript">
function submitForm(form) {
var submitFormFunction =
Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
</script>
</body>
<html>
Solution 5:
By making some changes in the JavaScript.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
“Submit is not a function”
error in JavaScript
</title>
</head>
<body style="text-align:center;">
<h2 style="color:green">
GeeksForGeeks
</h2>
<h2 style="color:purple">
“Submit is not a function” error
</h2>
<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="CLICK HERE">
</form>
<script type="text/javascript">
function submitForm(form) {
let enviar =
document.getElementById("enviar");
enviar.type = "submit";
}
</script>
</body>
<html>
Output:
When we lead the code
The error message
After using the solutions:
“Submit is not a function” error
Similar Reads
How to Fix 'TypeError: forEach is Not a Function' in JavaScript?
The error "TypeError: forEach is not a function" happens when you try to use the forEach() method on something that isn't an array or an iterable object. This usually occurs when you're working with a variable that you think is an array, but it’s not.To fix this, you just need to make sure the varia
3 min read
How to write a function in JavaScript ?
JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod
4 min read
How to Call a JavaScript Function from an onsubmit Event ?
The onsubmit event attribute in HTML is triggered when a form is submitted. It is also useful for validating form data or performing actions before any submission and ensures better control and validation of user inputs before data is sent. The below methods can be used to call a JavaScript function
2 min read
How to Fix "Error Message: addEventListener is Not a Function" in JavaScript?
The "addEventListener is not a function" error in JavaScript typically occurs when you're trying to use the addEventListener() method on something that isn’t an event target, like a null value or an object that doesn’t have this method. Here's how you can troubleshoot and fix it:1. Check the DOM Ele
2 min read
How to use javascript function in check box?
Checkboxes are used for instances where a user may wish to select multiple options, such as in the instance of a "check all that apply" question, in forms. HTML Checkboxes Selected. A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked attribute with a "yes
2 min read
How to Call a JavaScript Function using an onsubmit Event ?
HTML has a form element that is used to get the data from the user and send the data to the server. Before the HTML form sends data to the server, it generates an event called "submit". This event can be utilized to execute a JavaScript function that can either validate the form data or notify the u
3 min read
How to submit a form by clicking a link in JavaScript ?
Submitting a form by clicking a link in JavaScript involves binding a click event handler to the link element. When clicked, the handler triggers the form's submit action programmatically, allowing form submission without the need for a traditional submit button. ApproachHTML Structure:Basic HTML st
2 min read
How to Disable Submit Button on Form Submit in JavaScript ?
Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this arti
3 min read
JavaScript TypeError - "X" is not a function
This JavaScript exception is not a function that occurs if someone trying to call a value from a function, but in reality, the value is not a function. Message: TypeError: Object doesn't support property or method {x} (Edge) TypeError: "x" is not a function Error Type: TypeError Cause of Error: Ther
1 min read
How to clear form after submit in Javascript without using reset?
Forms in JavaScript serve to gather specific user information, essential in various contexts like recruitment or inquiry submissions. While offline forms can be freely distributed, online forms must maintain a consistent structure for all users. After filling out a form, submission is crucial, but d
2 min read