"Submit is not a function" error in JavaScript

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.

When you name the button submit, you override the submit() function on the form.

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

<input id="submit_value" type="button" name="submit_value" value="">

</form>

<script type="text/javascript">

document.getElementById("submit_value").onclick = submitAction;

function submitAction()
{
    document.getElementById("frmProduct").submit();
    return false;
}
</script>

EDIT: I accidentally swapped the id's around

Sorry to answer late but for those who are still facing the same error. To get rid of this error:

<form method="POST">
  <input type="text"/>
  <input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>

<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>

<script>
function submitTheForm(){
  document.getElementById("submit-form").click();
}
</script>

Explanation:

The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.

This solution is lifetime and almost 100% compatible in all browsers.

giving a form element a name of submit will simple shadow the submit property . make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .

In fact, the solution is very easy...

Original:

    <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>

Solution:

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

<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button" 
    name="submit_value" value="">

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

I had same issue and resolved my issue just remove name="submit" from submit button.

<button name='submit' value='Submit Payment' ></button>

Change To

<button value='Submit Payment' ></button>

remove name attribute hope it will work

You should use this code :

$(document).on("ready", function () {
       
        document.frmProduct.submit();
    });

form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.

HTMLFormElement.prototype.submit.call(form)

I faced this issues also but i made a quick fix using

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.

You can try

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

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

</form>

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

Don't you have more than one form with the same name ?

Use getElementById:

document.getElementById ('frmProduct').submit ()