動的フォームを作成する際のHTMLの記述方法について

動的フォームを作成したく悩んでおります。
添付図のような、前もって３項目は必ず入力すると決まっているものについては
データベースに登録するところまで完成しています。
下記のコードを書きました。

HTML
1<form th:action="@{/insert}" method="post">
2
3		<div>
4			名前<input type="text" name="teacherList[0].name" /> 
5			科目<input type="text" name="teacherList[0].subject" />
6		</div>
7		<div>
8			名前<input type="text" name="teacherList[1].name" /> 
9			科目<input type="text" name="teacherList[1].subject" />
10		</div>
11		<div>
12			名前<input type="text" name="teacherList[2].name" /> 
13			科目<input type="text" name="teacherList[2].subject" />
14		</div>
15		<input type="submit" value="送信" />
16
17	</form>

Teacher
1@Data
2public class Teacher {
3
4	private Integer id;
5	private String name;
6	private String subject;
7}

TeacherForm
1@Data
2public class TeacherForm {
3
4	private List<Teacher> teacherList;
5}

TeaherController
1@Controller
2@RequestMapping("/")
3public class TeacherController {
4	
5	@Autowired
6	private TeacherRepository teacher;
7
8	@RequestMapping("")
9	public String index() {
10		return "index";
11	}
12	
13	@RequestMapping("/insert")
14	public String insert(TeacherForm teacherForm) {
15		for(Teacher student : teacherForm.getTeacherList()) {
16			student.setName(student.getName());
17			student.setSubject(student.getSubject());
18			teacher.insert(student);
19		}
20		return "index";
21	}
22}

TeacherRepository
1@Repository
2public class TeacherRepository {
3
4	@Autowired
5	private NamedParameterJdbcTemplate template;
6	
7	public void insert(Teacher teacher) {
8		String sql = "insert into teachers(name,subject)values(:name,:subject)";
9		SqlParameterSource param = new BeanPropertySqlParameterSource(teacher);
10		template.update(sql, param);
11	}
12}
13

困っていること

上記のコードに加え、＋ボタンとーボタンを付け加えた以下のようなものを作成しました。

これを作成したことにより、html側のinputの数が変化してしまうため、
予め、teacherList[0].nameなどとできず、どのように書いたらいいかわかりません。

教えていただけると幸いです。
よろしくお願いいたします。

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<script type="text/javascript">
3$(document).on("click", ".add", function() {
4    $(this).parent().clone(true).insertAfter($(this).parent());
5});
6$(document).on("click", ".del", function() {
7    var target = $(this).parent();
8    if (target.parent().children().length > 1) {
9        target.remove();
10    }
11});
12</script>
13<body>
14
15	<form th:action="@{/insert}" method="post">
16
17		<div id="input_pluralBox">
18    		<div id="input_plural">
19				名前<input type="text" name="teacherList[0].name" /> 
20				科目<input type="text" name="teacherList[0].subject" />
21				<input type="button" value="＋" class="add pluralBtn">
22        		<input type="button" value="－" class="del pluralBtn">
23			</div>
24		</div>
25
26		<input type="submit" value="送信" />
27
28	</form>
29
30</body>
31</html>
32

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

回答2件

自己解決

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/teacher.js}"></script>
9<body>
10	
11	<form th:action="@{/insert}" method="post">
12	
13		<div id="parent">
14			名前<input type="text" name="teacherList[0].name" class="name"/>
15			科目<input type="text" name="teacherList[0].subject" class="subject"/>
16		</div>
17		
18		<input type="button" value="追加" id="add">
19		
20		<input type="submit" value="送信" />
21
22	</form>
23
24</body>
25</html>

JavaScript
1$(function(){
2	$("#add").on('click',function(){
3    var count = document.getElementsByClassName("name").length;
4    var parent = document.getElementById("parent");
5
6    var input1 = document.createElement("input");
7	input1.setAttribute("type","text");
8	input1.setAttribute("name","teacherList[" + count + "].name");
9	input1.setAttribute("class","name");
10	
11	var input2 = document.createElement("input");
12	input2.setAttribute("type","text");
13	input2.setAttribute("name","teacherList[" + count + "].subject");
14	input2.setAttribute("class","subject");
15	
16	var input3 = document.createElement("input");
17    input3.setAttribute("type","button");
18    input3.setAttribute("value","削除");
19    input3.setAttribute("id","del");
20    
21    var child = document.createElement("div");
22    child.appendChild(document.createTextNode("名前"))
23    child.appendChild(input1);
24    child.appendChild(document.createTextNode("科目"))
25    child.appendChild(input2);
26    child.appendChild(input3);
27    child = parent.appendChild(child)
28    
29    if(count === 1) {
30    	$("#add").hide();
31    }
32    $("#del").on('click',function(){
33    	if(child.hasChildNodes) {
34            child.remove();
35        }
36    	$("#add").show();
37    })
38	});
39});

このように記述したところ解決しました。

投稿2020/04/02 05:02

編集2020/04/02 05:07

tennis

総合スコア19

以下のようにfor文を使ってループしてみるのはどうですか？

<tr th:each="customer : ${customers}" th:object="${customer}">
    <td th:text="*{id}">100</td>
    <td th:text="*{lastName}"></td>
    <td th:text="*{firstName}"></td>
</tr>

参考に
https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482

投稿2020/04/01 12:53