はじめに

以前、「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

index.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を一度実行し、フォームを一人分生成しておく。

addForm.js

//インデント番号を初期化
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内に用意しておけるので、初期化されたフォームを簡単に追加することができた。

記事の内容に間違いや改善点などございましたら、ぜひコメントでご指摘ください。

templateタグを使ってフォームを複製