JavaScriptを使って、フォームの記入欄を動的に追加したい

JavaScriptを使って、フォームの記入欄を動的に追加する(少し修正)

はじめまして、プログラミング初心者です。
質問の書き方に至らない点があると思いますが、ご指導お願いいたします。

JavaScriptを使って、フォームの記入欄を動的に追加,削除しようとしています。

発生している問題・エラーメッセージ

複製したinputタグに数字を振りたいのですが、うまくいきません。

追加ボタンを押すとname属性の値の数字[0]が増えて行くようにしたいのですが、常に[1]となってしまいます。

該当のソースコード

html
1<div class="foo">
2  <div class="form-inline row mt10 bar" >
3      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
4      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
5      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
6  </div>
7</div>
8<div class="row">
9  <div class="col-md-3 mt15">
10    <button class="btn btn-default" id="add_row" type="button">行追加</button>
11  </div>
12</div>

javascript
1$(document).on("click", "#add_row", function () {
2    var target = $('.bar:last-child')
3    target.clone(true).appendTo('.foo');
4      $('.bar:last-child input').each(function(){
5        $(this).val('');
6        count = $('.bar').length-1;
7        $(this).attr('name',$(this).attr('name').replace('0',count));
8      });
9    $( '.foo' ).on( 'click', '.remove_row', function() {
10      if($('.bar').length > 1){
11        $( this ).parents( '.bar' ).remove();
12      }
13    });
14  });

試したこと

行追加ボタンを押したコードの結果

html
1<div class="foo">
2  <div class="form-inline row mt10 bar" >
3      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
4      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
5      <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
6  </div>
7  <div class="form-inline row mt10 bar" >
8      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
9      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
10      <button class="btn btn-default mt20　remove_row"　type="button">行削除</button>
11  </div>
12  <div class="form-inline row mt10 bar" >
13      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
14      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
15      <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
16  </div>
17<div class="form-inline row mt10 bar" >
18      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
19      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
20      <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
21  </div>
22</div>
23<div class="row">
24  <div class="col-md-3 mt15">
25    <button class="btn btn-default" id="add_row" type="button">行追加</button>
26  </div>
27</div>

期待する結果

html
1<div class="foo">
2  <div class="form-inline row mt10 bar" >
3      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
4      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
5      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
6  </div>
7  <div class="form-inline row mt10 bar" >
8      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail1]" value="" ></div>
9      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail2]" value="" ></div>
10      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
11  </div>
12  <div class="form-inline row mt10 bar" >
13      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail1]" value="" ></div>
14      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail2]" value="" ></div>
15      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
16  </div>
17<div class="form-inline row mt10 bar" >
18      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail1]" value="" ></div>
19      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail2]" value="" ></div>
20      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
21  </div>
22</div>
23<div class="row">
24  <div class="col-md-3 mt15">
25    <button class="btn btn-default" id="add_row" type="button">行追加</button>
26  </div>
27</div>

JavaScriptの中にある変数countを、console.logで確認してみたのですが、変数countは期待通り値が１ずつ増えていました。

どこが問題なのか解らないので、ご指導お願いいたします。

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

回答1件

ベストアンサー

自分ならこう組みます。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div class="foo">
9			<div class="form-inline row mt10 bar" >
10				<div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][][detail]" value="" ></div>
11				<button class="btn btn-default mt20 del_row" type="button">行削除</button>
12			</div>
13		</div>
14		<div class="row">
15			<div class="col-md-3 mt15">
16				<button class="btn btn-default" id="add_row" type="button">行追加</button>
17			</div>
18		</div>
19		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
20		<script type="text/javascript">
21			$(function () {
22				$("#add_row").on('click', function () {
23					var clone = $(".foo > .bar:first").clone();
24					clone.find('input').val('');
25					$(".foo").append(clone);
26				});
27			});
28		</script>
29	</body>
30</html>

行削除ボタンにIDつけておくと重複するので削除。classにする。
name属性の数字は空にしておけば数字を制御する必要がない。暗黙的にインデックスが割り当てられる。
clone() する前に input に値が入力されているとき、valueも一緒にコピーされるので、空にする。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title></title>
6    </head>
7    <body>
8        <div class="foo">
9            <div class="form-inline row mt10 bar" >
10                <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
11                <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
12				<button class="btn btn-default mt20 del_row" type="button">行削除</button>
13            </div>
14        </div>
15        <div class="row">
16            <div class="col-md-3 mt15">
17                <button class="btn btn-default" id="add_row" type="button">行追加</button>
18            </div>
19        </div>
20        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
21        <script type="text/javascript">
22			$(function () {
23				$("#add_row").on('click', function () {
24					var clone = $(".foo > .bar:first").clone();
25					var count = $(".foo > .bar").length;
26					clone.find('input').val('');
27					clone.find('input:eq(0)').prop("name", 'timetable[rows][' + count + '][detail1]');
28					clone.find('input:eq(1)').prop("name", 'timetable[rows][' + count + '][detail2]');
29					$(".foo").append(clone);
30				});
31			});
32        </script>
33    </body>
34</html>

参考サンプル
見積もり作成フォームのテンプレート

投稿2018/07/15 14:42

編集2018/07/16 14:05

退会済みユーザー

総合スコア0

sano0623

2018/07/16 13:53

ご回答ありがとうございます。ご回答頂いた上記のコードは正常に、期待通りの動きをしました。ありがとうございました。解答を頂いた後に気づいたのですが、問題を簡潔にした結果、重要な部分を削ってしまい、問題の本質が失われていました。完全に私のミスです。ですので、少し質問のコードを修正しました。申し訳ありませんでした。おこがましいとは思いますが、もう一度ご指導いただければ幸いです。よろしくお願いいたします。

退会済みユーザー

2018/07/16 13:55

まず先に、idの重複を解消してくれません？HTMLの文法違反なので…

sano0623

2018/07/16 13:57

ご指摘ありがとうございます。上記修正いたしました。

sano0623

2018/07/16 15:06

ご回答ありがとうございました。期待通りの結果を得ることができました。大変助かりました。今後ともよろしくお願いいたします。

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