とある案件で必要となったのでメモ。
ボタンを押すと、定型のフォームの追加や削除ができるようにしたくて、色々調べてみた。ヒントになったのはこちらの記事。
http://vkgtaro.jp/2007/10/28/000618
ただこのままだとdivがネストしてしまうので、ちょっと手を加えてみた。
■JavaScriptソース
<script type="text/javascript">
var ItemField = {
currentNumber : 0,
itemTemplate : '<h3>項目_count_</h3><input type="text" name="text_count_" />',
add : function() {
currentNumber++;
var new_item = this.itemTemplate.replace(/_count_/mg, currentNumber);
var new_area = document.createElement("div");
new_area.setAttribute("id", "item" + currentNumber);
var field = document.getElementById('itemParent);
field.appendChild(new_area);
document.getElementById('item' + currentNumber).innerHTML = new_item;
},
del : function() {
if (currentNumber == 0) { return; }
var field = document.getElementById('itemParent');
field.removeChild(field.lastChild);
currentNumber--;
}
}
</script>
■HTMLソース
<form method="post" action="xxx">
<div>
<input type="button" value="追加する" onclick="ItemField.add();" />
<input type="button" value="削除する" onclick="ItemField.del();" />
</div>
<div id="itemParent"></div>
<input type="submit" name="submit" value="登録する" />
</form>
これでテキストボックスを自由に増やしたり減らしたりできるようになる。
「追加する」を押すとitemParentの中にテキストボックスが1つできる。「削除する」を押すと一番下にあるテキストボックスから順に削除される。
とりあえずは例としてテキストボックス1つで書いてみたが、itemTemplateを書き換えればもっと複雑なフォームも自由に追加や削除ができる。
フォーム操作にjQueryなんぞいらんのじゃー！