Web Development

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

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 [code]document.getElementById(‘form_id’).submit();[/code] 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.

[cc lang=”html”]




[/cc]

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.

Shares:

Leave a Reply

Your email address will not be published. Required fields are marked *