How to solve “Submit is not a function” error in JavaScript ? - GeeksforGeeks

28 Jun, 2019
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.
<!DOCTYPE html><html>  <head>    <title>“Submit is not a function”       error in JavaScript</title></head>  <body>      <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:
<!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:
<!DOCTYPE html><html>  <head>    <title>      “Submit is not a function”      error in JavaScript  </title></head>  <body>      <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:
<!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:
<!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 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
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?