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>