Front End Programming
  1. ホーム
  2. ブログ一覧
  3. JS でフォーム操作したいなら name 属性に submit をつけてはならない

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

JavaScript

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

この記事を書いた人

かみーゆ/フロントエンドエンジニア

セブ島在住の気ままなフリーランスエンジニア。テクニカルディレクター・エンジニア講師・ブリッジSEを経て今に至る。CMS concrete5エバンジェリスト。テックブログ以外も「磨耗しない人生の選択」や「海外生活」のライフスタイルについて発信。好きなものは肉とビール。

Read More

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

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

Web制作に関する人気の記事

海外移住・ライフスタイルに関する人気の記事

キャリアアップ・転職に関する人気の記事