Property 'submit' of object #<HTMLFormElement> is not a function

Can anyone explain to me what this error means? I would appreciate it a lot for any kindof help with this.

<form class="form" id="form" action="/mailer.php" method="post">

The Jquery code I'm using for it is this.

$('#form').submit();  

Solution 1:

Check the form to see whether there is a HTMLInputElement with id or name is submit.

This will set a property submit to the HTMLFormElement, so the submit function which is in the prototype of the form element can't be executed.

Example:

<form class="form" id="form" action="/mailer.php" method="post">
    ​<input type="button" name="submit" value="go"/>
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

js:

​console.log($("#form")[0].submit)​;​  // will be the button element, not the submit function.

jQuery's .submit() method will call the .submit() on the original dom element, so the error will happen.

Solution 2:

xdazz explained the issue well.

You can use a native submit method of HTMLFormElement to work around a problem:

HTMLFormElement.prototype.submit.call($('#form')[0]);

Solution 3:

If you have a button or input with the name submit or id submit, I have seen errors in IE. Make sure your inputs are correctly named. Here's an article on it http://bugs.jquery.com/ticket/1414