Front End Programming

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

JS

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

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

最近、Vue.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属性に気をつけなければならないと思いました。
たかだか、そんなもので送信ボタンは動くのでちょっと気をつければいいだけですが気をつけてください。

関連記事もあわせてお読みください

Read More

記事のジャンル

管理人について

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に10年以上Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me