はじめに
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にしないようにしましょう。
海津 純平
