334

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

4
  • Which browser gives you this message? Can you post the complete source?
    – harto
    Commented May 7, 2009 at 6:05
  • Considering that the posted code works for me in both IE7 and Chrome2, then perhaps there is something wrong in code you haven't posted? Commented May 7, 2009 at 12:21
  • 23
    Perhaps you have a field with the name or id submit and thus .submit() is shadowed by that field? Commented May 7, 2009 at 12:22
  • that error occurred when you have same id="frmProduct" in different elements. Commented Aug 30, 2018 at 4:03

19 Answers 19

919

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.

13
  • 69
    Here's a handy trick. If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method, eg: document.createElement('form').submit.call(document.frmProduct).
    – Neil
    Commented Apr 21, 2013 at 7:23
  • 43
    Seems everyone has to learn this one the hard way. Would make a good job interview question
    – SeanDowney
    Commented Aug 19, 2013 at 19:04
  • 9
    I simply removed the name='submit' and Bob's your Aunty it worked!!
    – zzapper
    Commented Jul 21, 2014 at 13:41
  • 6
    I just wasted my 2-3 hours for this issue, thanks a lot for the answer Commented May 19, 2017 at 20:56
  • 8
    JavaScript really is the worst ever
    – Ben Harold
    Commented Jun 10, 2019 at 21:50
25

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.

0
21

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);
}
1
  • 15
    HTMLFormElement.prototype.submit.call(form) also works
    – musa
    Commented Oct 30, 2018 at 13:07
15
<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

6
  • document.getElementById("frmProduct").submit is not a function :(
    – Jin Yong
    Commented May 7, 2009 at 5:47
  • 1
    Do you have more than one element with the id 'frmProduct'?
    – tvanfosson
    Commented May 7, 2009 at 5:52
  • Adding submitAction as a handler for onsubmit and then invoking submit from it may create an infinite loop. The handler should be associated with onclick of the button.
    – tvanfosson
    Commented May 7, 2009 at 5:54
  • 1
    Downvoting accurate answers huh? lame guys, step on us to get those points you're selling your souls for
    – Chad Grant
    Commented May 7, 2009 at 13:36
  • @Chad Grant - Couldn't agree more.
    – Fenton
    Commented Aug 9, 2011 at 8:01
7

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)
1
  • 1
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
    – CascadiaJS
    Commented Jan 18, 2022 at 22:58
6

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();
}
1
  • 1
    This wont work in his case because he had an element named "submit" which effectively replaces the submit function... Commented Dec 31, 2020 at 20:01
3

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

2
  • 1
    This is more a workaround than an answer, and ideally you'd just not name things submit because you're trampling the kernel. Not that anything in the JS world is ideal :D
    – Neil
    Commented May 19, 2021 at 23:00
  • I tried this but I get Uncaught TypeError: Illegal invocation
    – aah134
    Commented Mar 16, 2022 at 7:46
3

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

3

I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.

1
  • Same happens if your submit has name="submit". I mean wtf :/
    – Moseleyi
    Commented Jul 10, 2023 at 20:57
2

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 .

2

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>
2
  • Can you please explain how this solves the OP's problem.
    – Kingsley
    Commented Jan 24, 2019 at 2:34
  • For sure, in this case (only in this case) the trouble is the scope. Commented Feb 18, 2019 at 23:13
2

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.

0
1

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();

1

You should use this code :

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

1
  • While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!
    – Filnor
    Commented Dec 6, 2018 at 13:25
0

What I used is

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

Just because everything else didn´t work.

0

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();
0

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.

-1

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 ?

-2

Use getElementById:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.