jquery フォームに要素を追加する方法

2017.9.10

フォームに対して動的に要素を追加する方法になります。

実装について

方法としては、あらかじめ作成しておいた(htmlに記述しておいた)フォームに後からjqueryで要素を追加する形になります。

コード&解説

ベースとなるフォームを作成しておきます。

idを指定して追加を行いますので、適当なidを付けておいてください。

<form id="myform">
</form>

javascript側です。

今回はhiddenの要素を追加します。

データをポストしたいので、nameやvalueを追加しておきます。

appendToのところに、追加する対象のフォームをidで指定します。

$("<input>", {
  type: 'hidden',
  id: 'myinput',
  name: 'myinput',
  value: 10000
}).appendTo('#myform');

このコードを実行すると、myformというidのフォームにhiddenのinputタグが追加されます。

この後、ポストすれば、myinputという名前で値がポストされます。