#はじめに
以前、「cloneNode()で入力フォームを複製してみた」という記事で入力フォームをcloneNode()を使って複製する記事を投稿した。
しかしその記事内のコードではフォーム内のテキストまで複製されてしまう。
ここではHTML5より追加されたtemplateタグを使ってフォームのテンプレートを作成し、それを複製することで、何も入力されていないフォームを追加していく。
#要件
「追加」ボタンをクリックし、名前、年齢、性別を入力するフォームを複製したい。(最大8人)
⇓
#templateタグとは
Javascriptで操作するDOM要素をテンプレート化するHTML要素。
templateタグで囲まれた要素は、ページの読み込み時には描画されない。
##templateタグの要素を複製する方法
template要素内の内容を複製し、ブラウザに表示するために必要な処理は以下の３つ。
①template要素を取得
②取得したtemplate要素の内容を複製
③DOMに追加
// template要素を取得
const template = document.getElementById('template');
// template要素の内容を複製
const clone = template.content.cloneNode(true);
// div(id="container")の中に追加
document.getElementById('container').appendChild(clone);
#実際にフォームを複製してみる
今回は「追加」ボタンをクリックすることで、HTML内のtemplateタグ内の内容を複製し、親要素であるid="input-form"のdivタグ内に追加していく。
また、フォームで受け取った値を扱う場合を考慮して、inputタグのname属性にインデント番号を付与し、複製するタイミングで1ずつ足していく。
##フォームのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="addForm.js"></script>
</head>
<body>
<!--親要素-->
<div class="input-form" id="input-form">
<!--テンプレート作成-->
<template id="form-template">
<div class="member" id="member">
<!--name属性にはフォーム追加時にインデント番号を付与-->
<input type="text" size="20" name="" placeholder="名前">
<input type="text" size="3" name="" placeholder="年齢">
<label for="male">
<input type="radio" value="男性" id="male">男性
</label>
<label for="female">
<input type="radio" value="女性" id="female">女性
</label>
</div>
</template>
</div>
<!--ボタンをクリックしたらJavascriptファイル内の関数addForm()を実行する-->
<div class="bt_addForm">
<input type="button" value="追加" onclick="addForm()">
</div>
</body>
</html>
##Javascriptで実装
ページ読み込み時にaddFormを一度実行し、フォームを一人分生成しておく。
//インデント番号を初期化
let i = 1
function addForm() {
// 8人以上なら処理を終了する
if (i > 8) {
return;
} else {
// HTMLからtemplate要素を取得
const template = document.getElementById("form-template");
// templateの内容を複製
const new_form = template.content.cloneNode(true);
// 子要素を指定しname属性の値を変更
const new_form_name = new_form.children[0].children[0];
new_form_name.name = 'name-'+i;
const new_form_age = new_form.children[0].children[1];
new_form_age.name = 'age-'+i;
//親要素を取得し 複製した要素を追加
const parent = document.getElementById("input-form");
parent.appendChild(new_form);
//インデント番号を更新
i++;
}
}
//ページ読み込み時に関数addForm()を実行
window.addEventListener('DOMContentLoaded', addForm);
#まとめ
複製したいコンポーネントをテンプレートとしてHTML内に用意しておけるので、初期化されたフォームを簡単に追加することができた。
記事の内容に間違いや改善点などございましたら、ぜひコメントでご指摘ください。