JavaScript側でsubmitができない

HTML, JavaScript

この記事は最終更新日から1年以上が経過しています。

はじめに

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

どんなことが起こったか

以下実際の状況を簡易化したコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
  <form id="fm">
    <button type="button" id="btn" name="submit">ボタン</button>
  </form>
  <script>
    // form内のbuttonをクリックしたときのイベント追加
    document.querySelector('#btn').addEventListener('click', function() {
      // formを内容を送信
      document.querySelector('#fm').submit();
    });
  </script>
</body>
</html>

ボタンを押してsubmitさせようとすると、以下のようなエラーが出ます。
Uncaught TypeError: document.querySelector(...).submit is not a function at HTMLButtonElement.<anonymous>

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

原因

結論から言うとbuttonの name="submit" が原因でした。
form内の要素はname属性の値を使って取得することもできます。
例えば以下のような書き方です。
<html lang="ja">
<head>
</head>
<body>
  <form id="fm">
    <input type="text" name="hoge">
  </form>
  <script>
    // テキスト入力欄のnameの値 hoge を指定
    console.log(document.querySelector('#fm').hoge);
    // 出力: <input type="text" name="hoge">
  </script>
</body>
</html>

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

↓出力
<button type="button" id="btn" name="submit">ボタン</button>

まとめ

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

HTML, JavaScript