[jQery]フォームのinput要素を追加する機能を実装

プログラミング jQuery

はじめに

HTML, jQueryでフォームのinput要素をページの再読み込みをすることなく追加する機能の実装方法を備忘録のためにまとめておりますが、参考になれば幸いです。

この記事ではinput要素を自由に追加する機能のみを紹介しております。データベースに登録するために使用する時は、inputのname属性を変更しないと挙動がおかしくなってしまうので、臨機応変に対応してください。

開発環境

  • HTML 5
  • jQuery 3.5.1

コード

See the Pen
qBaZboK
by yoshi5525 (@yoshi5525)
on CodePen.

コードの説明

HTML

  • 3〜7行目
  • inputやボタンなどをdivで囲むことで、それらをまとめて追加や削除を行います。
  • 5〜6行目
  • それぞれ追加・削除を行うボタンを配置しております。

JS

  • 2〜5行目
  • 追加ボタンをクリックしたときの挙動です。
  • $(this)は.addボタンを意味しております。
  • 3行目のclone()メソッドでdivを一つ増やします。insertAfterで既存のinput要素の次の場所にdivを追加しています。
  • 4行目は追加したinput type=”text”の文字を空にしています。この記述がないと追加元inputのテキストもコピーされてしまい、操作性が悪くなります。
  • 7〜12行目
  • 削除ボタンをクリックしたときの挙動です。
  • 8行目はinput type=”text”の数がいくつあるか取得しています。
  • 9行目は上記のinput数が2個以上の時のみ削除処理が実行するようにif文を記述しております。この記述がないと、input type=”text”の数が0個になることを防ぎます。

さいごに

今回はinput要素を自由に追加する機能のみを紹介しました。あくまで参考としてご活用していただけると幸いです。また、この機能を応用することでinput要素だけでなく様々な要素の追加ができるので、色々な使い方をしてみてください。