formのsubmit関数を使うときは、formタグの中にidまたはnameがsubmitとなっている入力項目を含めてはいけない

id または name 属性が submit となっている入力項目（input, select タグなど）が form タグ内に存在する場合、その form の submit() 関数を実行すると、

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

というエラーが発生する。

<form id="form-1">
</form>

<form id="form-2">
    <input type="button" id="submit" />
</form>

<form id="form-3">
    <input type="button" name="submit" />
</form>

<form id="form-4">
    <div id="submit"></div>
</form>

<form id="form-5">
    <select id="submit"></select>
</form>

console.log(document.getElementById('form-1').submit);
// > function submit() { [native code] }
console.log(document.getElementById('form-2').submit);
// > <input type="button" id="submit" />
console.log(document.getElementById('form-3').submit);
// > <input type="button" name="submit" />
console.log(document.getElementById('form-4').submit);
// > function submit() { [native code] } 
console.log(document.getElementById('form-5').submit);
// > <select id="submit"></select>

id または name が submit となっている入力項目タグが存在する場合、 form の submit プロパティは関数ではなく、当該タグの DOM オブジェクトを指してしまっている。

今回このエラーに遭遇したときは、 jQuery の submit() 関数を使用していたが、これも結局は内部で form タグの submit プロパティを関数として実行しようとしているので、同じようにエラーになってしまう。

参考

• javascript - Property 'submit' of object <HTMLFormElement> is not a function - Stack Overflow