[javascript] "Submit is not a function" error in JavaScript

Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:

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

I also tried this:

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

Both show me the same error :(

If you have no opportunity to change name="submit" you can also submit form this way:

function submitForm(form) {
    const submitFormFunction = Object.getPrototypeOf(form).submit;
    submitFormFunction.call(form);
}

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 .

Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.

You should use this code :

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

What I used is

var enviar = document.getElementById("enviar");
enviar.type = "submit"; 

Just because everything else didn´t work.

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 ?

I had the same issue when i was creating a MVC application using with master pages. Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.

For my case it created multiple tags on my page so there were some issues referencing the correct form.

To work around this i'll let the button handle which form object to use:

onclick="return SubmitForm(this.form)"

and with the js:

function SubmitForm(frm) {
    frm.submit();
}

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>

This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:

If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.

My modification to his method, and what worked for me:

document.createElement('form').submit.call(document.getElementById(frmProduct));

Solution for me was to set the "form" attribute of button

<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>

or is js:

YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();

<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

Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();

Use getElementById:

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

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