動的フォームを作成したく悩んでおります。
添付図のような、前もって3項目は必ず入力すると決まっているものについては
データベースに登録するところまで完成しています。
下記のコードを書きました。
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。