【jquery】ボタンクリックでフォームを追加し、採番で番号を振り分けたい

前提・実現したいこと

すでにフィームが1つ表示状態から
ボタンをクリックすることによって、フォームを複製したいです。

現状下記のように、実装をしました。

見た目上は、＋クリックでフォームが複製されるのですが、
元のフォームと、複製されたフォームが同じフォームと判断され分けて入力ができない状態です
（ラジオボタンだと複製したフォームをで選択すると元のラジオボタンが外れる）

nameやidに[0]と記載している部分を0,1,2,3・・・という風に連番にする必要があるかと思うのですが、
記載の方法ではうまく動かず、こちらで質問をさせていただきました。

有識者の方がいらっしゃいましたら、教えていただけますと幸いです。
どうぞ、宜しくお願い致します。

HTML

html
1<div class="items">
2    <div class="item">
3        <div class="left">
4
5            <!-- ファイル選択 -->
6            <div class="file">
7                <label class="file_wrap">
8                    <input type="file" name="file" class="fileinput">ファイルを選択</label>
9                <span class="filename"></span>
10            </div>
11
12            <!-- 文字入力 -->
13            <label class="text" for="photo_area[0]">写真のタイトル</label>
14            <input type="text" id="photo_area[0]" name="photo_area[0]" placeholder="" value="">
15
16
17            <!-- ラジオボタン  -->
18            <label class="text">写真の評価</label>
19            <div class="radio">
20
21                <label for="status-a[0]">
22                    <input type="radio" name="status[0]" value="1" id="status-a[0]"><span>A</span></label>
23
24                <label for="status-b[0]">
25                    <input type="radio" name="status[0]" value="2" id="status-b[0]"><span>B</span></label>
26                <label for="status-c[0]">
27                    <input type="radio" name="status[0]" value="3" id="status-c[0]"><span>C</span></label>
28
29                <label for="status-d[0]">
30                    <input type="radio" name="status[0]" value="4" id="status-d[0]"><span>D</span></label>
31            </div>
32        </div>
33
34        <!-- テキストエリア -->
35        <div class="right">
36            <label for="comment[0]" class="textarea-tit">コメント</label>
37            <textarea class="textarea" name="comment[0]" id="comment[0]"
38                placeholder=""></textarea>
39        </div>
40    </div>
41</div>
42<div class="add_btn-block">
43    <button id="add_btn" type="button">＋</button>
44</div>
45

JS

script.js
1
2<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
3
4<script type="text/javascript">
5
6    $(function () {
7
8        $('button#add_btn').click(function () {
9
10            var tr_form = '' +
11                '<div class="item">' +
12                '<div class="left"> <div class="file"> <label class="file_wrap"> <input type="file" name="file" class="fileinput">ファイルを選択</label> <span class="filename"></span> </div><label class="text" for="photo_area[0]">写真のタイトル</label> <input type="text" id="photo_area[0]" name="photo_area[0]" placeholder="" value=""> <label class="text">写真の評価</label> <div class="radio"> <label for="status-a[0]"> <input type="radio" name="status[0]" value="1" id="status-a[0]"><span>A</span></label> <label for="status-b[0]"> <input type="radio" name="status[0]" value="2" id="status-b[0]"><span>B</span></label> <label for="status-c[0]"> <input type="radio" name="status[0]" value="3" id="status-c[0]"><span>C</span></label> <label for="status-d[0]"> <input type="radio" name="status[0]" value="4" id="status-d[0]"><span>D</span></label> </div></div><div class="right"> <label for="comment[0]" class="textarea-tit">コメント</label> <textarea class="textarea" name="comment[0]" id="comment[0]" placeholder=""></textarea> </div></div>' +
13                '</div>';
14
15            $(tr_form).appendTo($('.items'));
16
17        });
18
19
20    });
21
22</script>

追記

ファイル選択から選択したファイル名を表示するための実装です。
下記記載したところ、元々表示されている1つ目の「ファイル選択」ではうまく動作するのですが、
＋を押して追加した2つ目以降だとうまく動作がされない状況です。。。
※<input type="file" name="file[0]" class="fileinput">への変更は済です。

js
1$('.file .fileinput').on('change', function () {
2      var file = $(this).prop('files')[0];
3      $(this).closest('.file').find('.filename').text(file.name);
4　});

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと強引かな？

以下のように変更。動作検証はしていません。
<input type="file" name="file[0]" class="fileinput">ファイルを選択</label>

js
1
2document.getElementById('add_btn').addEventListener ('click', ()=> {
3  let
4    parent = document.querySelector ('.items'),
5    childs = parent.querySelectorAll ('.item'),
6    len = childs.length,
7    item = childs[0].cloneNode (true),
8    a = [...item.querySelectorAll ('*[for]')],
9    b = [...item.querySelectorAll ('*[name]')],
10    c = [...item.querySelectorAll ('*[id]')],
11    reg0 = /^.+[\d+]$/,
12    reg1 = /[\d+]$/,
13    str = `[${len}]`;
14
15  a.forEach (a=> reg0.test (a.getAttribute('for')) && a.setAttribute ('for', a.getAttribute('for').replace (reg1, str)));
16  b.forEach (a=> reg0.test (a.name) && a.setAttribute ('name', a.name.replace (reg1, str)));
17  c.forEach (a=> reg0.test (a.id) && a.setAttribute ('id', a.id.replace (reg1, str)));
18  parent.appendChild (item);
19}, false);
20
21

こんなことをするくらいなら、最初から５個程度フォームを準備して必要な分だけ表示するほうが良いのだと作ってから思いました。

--
追記
jQuery を意地でも使いたい人と、意地になって使わない人との掛け合いね。
changeイベントを張り付けてからだと、新規挿入分は無視されているかな。
ルートから監視すれば取得できますよ。

js
1document.getElementById('add_btn').addEventListener ('click', ()=> {
2  let
3    parent = document.querySelector ('.items'),
4    childs = parent.querySelectorAll ('.item'),
5    len = childs.length,
6    item = childs[0].cloneNode (true),
7    a = [...item.querySelectorAll ('*[for]')],
8    b = [...item.querySelectorAll ('*[name]')],
9    c = [...item.querySelectorAll ('*[id]')],
10    f = item.querySelector ('input[type="file"]'),
11    reg0 = /^.+[\d+]$/,
12    reg1 = /[\d+]$/,
13    str = `[${len}]`;
14
15  a.forEach (a=> reg0.test (a.getAttribute('for')) && a.setAttribute ('for', a.getAttribute('for').replace (reg1, str)));
16  b.forEach (a=> reg0.test (a.name) && a.setAttribute ('name', a.name.replace (reg1, str)));
17  c.forEach (a=> reg0.test (a.id) && a.setAttribute ('id', a.id.replace (reg1, str)));
18  f.value = '';
19  parent.appendChild (item);
20}, false);
21
22
23//ルートから取得
24document.addEventListener ('change', event=> {
25  let fs = document.querySelectorAll ('input[type="file"]');
26  let vals = [...fs].map (f=> f.value).join (", ");
27  console.log(vals);
28});
29

投稿2021/02/28 09:37

編集2021/02/28 11:17

babu_babu_baboo

総合スコア616

kii.32

2021/02/28 10:25

ご丁寧にありがとうございます！動きました！コード読み解きながら勉強させていただきます。。！一つだけ問題がありまして。。 input type="file"からファイル選択後の名前を反映できるように、jsを書いている（追記致しました）のですが、こちらだけうまく動かず何故だかわかりますでしょうか？

babu_babu_baboo

2021/02/28 10:31

これ付けた？ <input type="file" name="file[0]" class="fileinput">ファイルを選択</label>

kii.32

2021/02/28 10:49

はい、 <input type="file" name="file" class="fileinput">ファイルを選択</label> ↓ <input type="file" name="file[0]" class="fileinput">ファイルを選択</label> へ変更した上で、うまく動かなくて、、

kii.32

2021/02/28 11:04

たくさん聞いてしまいすみません。。。 1つ目のフィールドに記載したまま+ボタンを押すと入力内容が追加のフィールドにもそのまま反映がされてしまうのですが、新たなフィールドを何も入力されていない状態で表示することもできるのでしょうか。。。

kii.32

2021/02/28 11:34

追記ありがとうございます！動作検証してみたのですが、これでも、2点ともうまく動かずでした。。。何故なのか考えてみたのですが、さっぱりわかりませんでした泣・新規挿入で元の入力内容がそのまま反映されてしまう・ファイル選択後の名前の反映（.filename）が＋で追加した項目でできない

babu_babu_baboo

2021/02/28 11:43

console.log にファイル名のリストが出てるのだけれど。質問しなおしたほうが吉かな

kii.32

2021/02/28 15:06

一度質問し直ししてみます。この度はありがとうございました！大変勉強になりました。感謝致します。 babu_babu_babooさんをベストアンサーとさせていただきます。