動的フォームでname属性のリストに適切な番号を振りたい

現在

添付してあるようなものを作成しています。
①チェックボタンを押したら、入力フォームと追加ボタンが生成される
②追加ボタンを押したら、入力フォームが１つ増える。さらに追加ボタンが消え、削除ボタンが出てくる。
③削除ボタンを押すと、追加したものが消え、追加ボタンが出てくる。
④チェックを外すと、入力フォームがすべて消える。

困っていること

上記のような順番で入力した時に、DBでは2と3が重複して登録されてしまいます。

実現したいこと

「困っていること」での順番で打ち込んだ場合、DBでは
１　早稲田
２　慶應
３　早稲田
と登録されたい。

順番通りに登録すればきちんと登録されるのですが、
（例えば、早稲田フォームに２つ、または１つ打ち込んでから、
慶應のチェックをつけ入力フォームを生成し、それで送信ボタンを押す）
この順番が変わってしまうと、DBへうまく登録されません。

よろしくお願いいたします。

コード

HTML
1<!DOCTYPE html>
2<html lang="ja" xmlns:th="http://www.thymeleaf.org">
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6</head>
7<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
8<script th:src="@{/js/waseda.js}"></script>
9<script th:src="@{/js/keio.js}"></script>
10<body>
11	
12	<form th:action="@{/insert}" method="post">
13	
14		<label><input type="checkbox" value="早稲田大学" id="waseda">早稲田大学</label>
15		<div id="parentM">
16				<!-- ここにinputが追加される -->
17		</div>
18		<input type="button" value="追加" id="addMon"><br>
19
20		<label><input type="checkbox" value="慶應大学" id="keio">慶應大学</label>
21			<div id="parentTue">
22				<!-- ここにinputが追加される -->
23			</div>
24			<input type="button" value="追加" id="addTue">
25
26		<input type="submit" value="送信" />
27
28	</form>
29
30</body>
31</html>

wasedaJavaScript
1$(function(){
2	$("#addMon").hide();
3	var count = 0;
4	
5	$("#waseda").on('click',function() {
6		if(this.checked) {
7			//チェックがついたら、チェックボックスにnameを追加
8			var waseda = document.getElementById("waseda");
9			waseda.setAttribute("name","teacherList[" + count + "].university");
10			
11			//<div id="parentM">の中に<input>を形成していく
12			var parentM = document.getElementById("parentM");
13			var childM = document.createElement("div");
14			childM.setAttribute("id","idM");
15			
16			var name = document.createElement("input");
17			name.setAttribute("type","text");
18			name.setAttribute("placeholder","教授名");
19			name.setAttribute("name","teacherList[" + count + "].name");
20			name.setAttribute("class","waseda1");
21			
22			var subject = document.createElement("input");
23			subject.setAttribute("type","text");
24			subject.setAttribute("placeholder","科目名");
25			subject.setAttribute("name","teacherList[" + count + "].subject");
26			
27			childM.appendChild(name);
28			childM.appendChild(subject);
29			
30			parentM.appendChild(childM);
31			
32			$("#addMon").show();
33		} else {
34			$("#addMon").hide();
35			$("#idM").remove();
36		}
37		
38	});
39});
40
41$(function(){
42	$("#addMon").on('click',function(){
43		var count1 = document.getElementsByClassName("waseda1").length;
44		var count2 = document.getElementsByClassName("wasecount").length;
45		var count = count1 + count2;
46
47    var name = document.createElement("input");
48    name.setAttribute("type","text");
49    name.setAttribute("placeholder","教授名");
50    name.setAttribute("name","teacherList[" + count + "].name");
51    name.setAttribute("class","waseda2 wasecount");
52	
53	var subject = document.createElement("input");
54	subject.setAttribute("type","text");
55	subject.setAttribute("placeholder","科目名");
56    subject.setAttribute("name","teacherList[" + count + "].subject");
57    subject.setAttribute("class","waseda2");
58	
59	var university = document.createElement("input");
60	university.setAttribute("type","checkbox");
61	university.setAttribute("checked","checked");
62	university.setAttribute("value","早稲田大学");
63	university.setAttribute("name","teacherList[" + count + "].university");
64	university.setAttribute("class","waseda2");
65	university.setAttribute("id","checkM");
66	
67	
68	var del = document.createElement("input");
69	del.setAttribute("type","button");
70	del.setAttribute("value","削除");
71	del.setAttribute("id","del");
72	del.setAttribute("class","waseda2");
73    
74   
75	var childM = document.getElementById("idM");
76	childM.appendChild(name);
77	childM.appendChild(subject);
78	childM.appendChild(del);
79	childM.appendChild(university);
80    
81    $("#checkM").hide();
82    
83    if(count === 1) {
84    	$("#addMon").hide();
85    }
86    $("#del").on('click',function(){
87    	$(".waseda2").remove();
88    	$("#addMon").show();
89    })
90	});
91});

keioJavaScript
1$(function(){
2	$("#addTue").hide();
3	$("#keio").on('click',function() {
4		if(this.checked) {
5			var count1 = document.getElementsByClassName("waseda1").length;
6			var count2 = document.getElementsByClassName("wasecount").length;
7			var count = count1 + count2;
8			if(count === 0) {
9				count = 0
10			} else {
11				count = count
12			}
13			
14			//チェックがついたら、チェックボックスにnameを追加
15			var keio = document.getElementById("keio");
16			keio.setAttribute("name","teacherList[" + count + "].university");
17			
18			//<div id="childM">の中に<input>を形成していく
19			var parentTue = document.getElementById("parentTue");
20			var childTue = document.createElement("div");
21			childTue.setAttribute("id","idTue");
22			
23			var name = document.createElement("input");
24			name.setAttribute("type","text");
25			name.setAttribute("placeholder","教授名");
26			name.setAttribute("name","teacherList[" + count + "].name");
27			name.setAttribute("class","keio1");
28			
29			var subject = document.createElement("input");
30			subject.setAttribute("type","text");
31			subject.setAttribute("placeholder","科目名");
32			subject.setAttribute("name","teacherList[" + count + "].subject");
33			
34			childTue.appendChild(name);
35			childTue.appendChild(subject);
36			
37			parentTue.appendChild(childTue);
38			
39			$("#addTue").show();
40		} else {
41			$("#addTue").hide();
42			$("#idTue").remove();
43		}
44		
45	});
46});
47
48$(function(){
49	
50	$("#addTue").on('click',function(){
51		var count1 = document.getElementsByClassName("waseda1").length;
52		var count2 = document.getElementsByClassName("wasecount").length;
53		var count3 = document.getElementsByClassName("keio1").length;
54		var count4 = document.getElementsByClassName("keiocount").length;
55		var count = count1 + count2 + count3 + count4;
56		if(count === 0) {
57			count = 0
58		} else {
59			count = count
60		}
61
62    var name = document.createElement("input");
63    name.setAttribute("type","text");
64    name.setAttribute("placeholder","教授名");
65    name.setAttribute("name","teacherList[" + count + "].name");
66    name.setAttribute("class","keio2 keiocount");
67	
68	var subject = document.createElement("input");
69	subject.setAttribute("type","text");
70	subject.setAttribute("placeholder","科目名");
71    subject.setAttribute("name","teacherList[" + count + "].subject");
72    subject.setAttribute("class","keio2");
73	
74	var university = document.createElement("input");
75	university.setAttribute("type","checkbox");
76	university.setAttribute("checked","checked");
77	university.setAttribute("value","慶應大学");
78	university.setAttribute("name","teacherList[" + count + "].university");
79	university.setAttribute("class","keio2");
80	university.setAttribute("id","checkTue");
81	
82	var del = document.createElement("input");
83	del.setAttribute("type","button");
84	del.setAttribute("value","削除");
85	del.setAttribute("id","del");
86	del.setAttribute("class","keio2");
87    
88   
89    var childTue = document.getElementById("idTue");   
90    childTue.appendChild(name);
91    childTue.appendChild(subject);
92    childTue.appendChild(del);
93    childTue.appendChild(university);
94    
95    $("#checkTue").hide();
96    
97    if(count >= 1) {
98    	$("#addTue").hide();
99    }
100    $("#del").on('click',function(){
101    	$(".keio2").remove();
102    	$("#addTue").show();
103    })
104	});
105});

変数名がわかりにくいかと思いますが、よろしくお願いいたします。

yambejp

2020/04/03 09:50

サーバー側の言語も明示しておいてください

tennis

2020/04/03 11:35

すいません、Javaです

yambejp

2020/04/03 11:40

仕様の説明をきちんとしたほうが良いでしょうチェックボックスにチェックするとそのボックスに teacherList[0,1,2,・・・].universityというnameがつくのでしょうか？常に0から始まるようnameを振りなおす？

yambejp

2020/04/03 11:44

addとかの仕様もいまいち伝わってきません

tennis

2020/04/03 12:07 編集

早稲田にチェックを入れると、１番最初に現れるフォーム（①）の「教授名」と「科目名」にはteacherList[0].name、teacherList[0].subject、これに加えてteacherList[0].universityがそれぞれnameに割り振られます。次に、早稲田にある「追加ボタン」を押すと２番目の入力フォーム（②）が現れて、teacherList[1].nameとteacherList[1].subject、これに加えteacherList[1].universityというnameがフォームにつきます。このteacherList[1]の[ ]内の番号は、直前にある入力フォームが何個あるかによって決めています。この場合だと、追加ボタンを押して出てきたフォーム（②）より前に、１つフォーム（①）があるので、0の次の１を割り当てています。早稲田の入力が終わって慶應に進みます。慶應にチェックを入れると、１番目のフォーム（③）にはteacherList[2].name、teacherList[2].subject、これに加えてteacherList[2].universityがそれぞれnameに割り振られます。そしてまた「追加ボタン」を押すと、追加で現れる２番目のフォーム（④）にはteacherList[3].name、teacherList[3].subject、これに加えてteacherList[3].universityがそれぞれnameに割り振られます。たとえば、早稲田の１番目のフォーム（①）（teacherList[0].name、teacherList[0].subject、teacherList[0].university）を入力して、次に、慶應の１番目のフォーム（③）（teacherList[1].name、teacherList[1].subject、teacherList[1].university）を入力する。＊早稲田で追加ボタンを押していないので、慶應の[ ]内の数字は1になります。この次に、早稲田の方に戻って追加ボタンで作成されたフォーム（②）に書き込むと、このフォーム②の前には、早稲田の中ではフォーム（①）しかないため、teacherList[1].name、teacherList[1].subject、teacherList[1].universityこのようになり、慶應のフォーム（③）と被ってしまいます。すいません、このような仕様です。わかりにくいようでしたら再度ご指摘ください。

jimbe

2020/04/03 20:31

慶應の count に早稲田を含んでいるのと同じように, 早稲田の count に慶應を含めれば良いのでは?

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

回答1件

ベストアンサー

formdataで処理すると楽になるかもしれません

投稿2020/04/03 11:15

yambejp

総合スコア114839

yambejp

2020/04/03 11:53

とりあえずチェックボックスの名前の振り直し <script> $(function(){ $('.mycheck').on('change',function(){ console.log(1); $('.mycheck').attr('name',null).filter(':checked').each(function(){ $(this).attr('name','test['+$('.mycheck:checked').index(this)+']'); }); }); }); </script> <form action="y.php" method="post"> <label><input type="checkbox" value="aaa" class="mycheck">aaa</label><br> <label><input type="checkbox" value="bbb" class="mycheck">bbb</label><br> <label><input type="checkbox" value="ccc" class="mycheck">ccc</label><br> <input type="submit" value="送信" /> </form>

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