JavaScript側でsubmitができない

HTML, JavaScript

はじめに

JavaScriptで submit() 関数が上手く動かずハマってしまいました。

どんなことが起こったか

以下実際の状況を簡易化したコードです。

ボタンを押してsubmitさせようとすると、以下のようなエラーが出ます。

submitは関数じゃないって怒られました。
なんで????????????

原因

結論から言うとbuttonの name="submit" が原因でした。
form内の要素はname属性の値を使って取得することもできます。
例えば以下のような書き方です。

つまり、 document.querySelector('#fm').submit() はsubmit関数ではなく、
form内のbutton要素を見てしまいます。
実際にconsoleに出力してみても、確かにbutton要素を見ていました。

↓出力

まとめ

ちなみにid属性の値をsubmitにしても同じことが言えます。
id属性やname属性の値はsubmitにしないようにしましょう。

HTML, JavaScript