By Jin Yong


2009-05-07 05:41:20 8 Comments

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

14 comments

@Zurc Soirrab 2019-01-24 01:46:48

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>

@Kingsley 2019-01-24 02:34:44

Can you please explain how this solves the OP's problem.

@Zurc Soirrab 2019-02-18 23:13:50

For sure, in this case (only in this case) the trouble is the scope.

@AnilSengul 2018-12-06 13:06:38

You should use this code :

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

@Filnor 2018-12-06 13:25:13

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!

@Ram Thota 2017-12-21 07:12:09

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

@jlemley 2017-05-25 17:54:35

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

@ProtonIonNeutron 2017-03-10 13:19:17

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

@Terbiy 2017-01-25 08:18:14

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

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

@musa 2018-10-30 13:07:03

HTMLFormElement.prototype.submit.call(form) also works

@aeid 2016-09-25 17:28:08

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 .

@compraspro.com 2016-07-16 08:54:16

What I used is

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

Just because everything else didnĀ“t work.

@epascarello 2009-05-07 11:46:35

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.

@Paul Voss 2012-06-21 16:21:05

Just ran into this problem with selenium. "submit" seems to be the standard name for submit buttons in typo3 frontend logins. >.<

@Neil E. Pearson 2013-04-21 07:23:12

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.frmProdu‌​ct).

@SeanDowney 2013-08-19 19:04:40

Seems everyone has to learn this one the hard way. Would make a good job interview question

@zzapper 2014-07-21 13:41:54

I simply removed the name='submit' and Bob's your Aunty it worked!!

@natebeaty 2016-07-08 22:25:09

Amazed I've never run into this, but alas, that was the problem!

@kikuyu1 2016-11-08 12:34:03

Amazing, thank you for your answer it really help me

@Mehul Prajapati 2017-05-19 20:56:50

I just wasted my 2-3 hours for this issue, thanks a lot for the answer

@kayge 2018-05-29 20:09:48

In case it helps anyone else: I had an id='submit' on the button that was throwing things off (removing/renaming the name attribute was not sufficient).

@nwolybug 2018-09-06 13:25:12

@kayge Just had this issue and had to update the id as well.

@Vijay Chauhan 2018-10-14 02:58:51

I just wasted my 2-3 hours for this issue, thanks a lot for the answer

@Rox 2019-04-13 13:44:51

OK dude, you are the MAN! I was about to kick my head with a hammer.

@Ben Harold 2019-06-10 21:50:30

JavaScript really is the worst ever

@gopeca 2014-05-31 09:00:26

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.

@Quangahh 2012-06-18 07:40:54

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

@Ilya Birman 2009-05-07 09:18:51

Use getElementById:

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

@Fabien Ménager 2009-05-07 06:37:23

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 ?

@Chad Grant 2009-05-07 05:44:43

<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

@Jin Yong 2009-05-07 05:47:48

document.getElementById("frmProduct").submit is not a function :(

@tvanfosson 2009-05-07 05:52:48

Do you have more than one element with the id 'frmProduct'?

@tvanfosson 2009-05-07 05:54:47

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.

@Chad Grant 2009-05-07 13:36:50

Downvoting accurate answers huh? lame guys, step on us to get those points you're selling your souls for

@Fenton 2011-08-09 08:01:45

@Chad Grant - Couldn't agree more.

@Jakob Alexander Eichler 2018-07-30 15:15:13

Is there a way to submit it while overwriting the submit value?

Related Questions

Sponsored Content

54 Answered Questions

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

41 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

88 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6152588 View
  • 7678 Score
  • 88 Answer
  • Tags:   javascript arrays

58 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

3 Answered Questions

30 Answered Questions

[SOLVED] How to change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2483064 View
  • 2656 Score
  • 30 Answer
  • Tags:   javascript html dom

38 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

Sponsored Content