JS でフォーム操作したいなら name 属性に submit をつけてはならない

フォーム操作したい時 JS で値を追加したり、操作したい時があると思います。そんな時、name 属性の命名に注意ください！場合によっては JS が動かねーから要注意です。

element.submit()でフォームを send できる

最近、Vue.js.js などで画面遷移することなくフォームを実装することも多くなりました。あと、リターンキーでフォームの誤送信が起こらないようにして欲しいなどという要望も多めです。なのでフォーム操作をJS制御することって多々あるもんなんです。

フォームの submit をとめる方法を考える

一定条件に満たした場合にフォームを送る時、JS で実装するときふた通りあると思います。
まずは form タグ内に input[type=submit]ボタンを設置する。条件に満たない場合、フォーム機能を止めることもできます。
もしくは input[type=submit] を使わず、特定の button もしくはinput[type=button] でクリックした時に、submit() を発火させる。 いずれかだと思います。

name 属性に submit があるだけで、JS が死ぬ

後者で操作する時、面倒なことに element.submit() は真っ先に name属性に万が一 submit があるだけで、拾ってしまって動かなくなります。

焦る必要はありません。解決法は超カンタンです。name属性の命名をsubmit_btnとか変えましょう。

終わりに

前も似たようなことで、name属性に気をつけなければならないと思いました。
たかだか、そんなもので送信ボタンは動くのでちょっと気をつければいいだけですが気をつけてください。