Solution: Property ‘submit’ of object #<HTMLFormElement> is not a function

  • Avinash
  • 4
  • May 16, 2012
  • Tutorial

If you have came accross this problem then you are at right place for the solution. I have the same problem and I was not sure what the real problem is. I was just about to bang my head on WALL :).

But hopefully I have found the solution for the same. But first let me explain what the scenario is:

Problem Definition

I had one simple HTML form and have done JS validation and coded to submit the form using document.getElementById('form_id').submit(); method.

But whenever I call this submit method I was getting below error:

Uncaught TypeError: Property ‘submit’ of object #<HTMLFormElement> is not a function

I was not sure about the what the problem is becuase I was not doing any extra ordanary thing. The code is just about to submit the form using the javascript that’s it. Do you think is there anything special yet?

Solution

As you can see the problem is tricky so solution is also quite tricky. The real problem is with the name and/or id of your submit button. Surprised????

Yes the problem was the name attribute of the submit button in form which I was trying to submit.

Reason

Let’s say if your form element has a button with ID/name “submit”. When you trigger form.submit(), browser actually tries to run button element as a function instead of running the form’s submit function.

Demo

If you are not trusting me about the possibility of this problem then create one HTML file and place below html form code in that file, here you can notice the name of the submit button is “submit”. This problem may occur when you have is set to submit.

<form method="post">
  <fieldset>
    <input type="text" name="demo_name">
    <input type="submit" name="submit" value="Submit">
    <input type="button" name="cancel" value="Cancel">
  </fieldset>
</form>

Now try to submit this form using JavaScript and have a look at your console for the error and see the magic ;) Like us on Facebook or Follow us on Twitter if you like this article.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • kkatusic

    I had this problems, now I know why :)

  • anon

    So what’s the solution? How do you submit the form if you don’t have control over the HTML in order to change the name of the submit button?

  • Germán

    A whole hour to find the solution! Thank you very much! :)

  • Klaitos

    Awesome fix, saved a lot of time.
    Thank buddy !