前提・実現したいこと
プログラミング全般暦の浅い初心者です。
備品管理システムのようなWEBアプリケーションを開発しています。
貸し出し画面にて
Formに入力する項目は
・userId
・itemId
・testNo
・date(hidden)
ですが、testNoは複数登録する場合もありJsでテキストボックスを増やせるようにしています。
(testNoはList<TestNoList>のフィールドtestNo)
その後コントローラーにPOSTしてDBの処理をしますが
testNoの数分の登録をします。(testNo以外のデータ同じデータが複数できる)
その際Jsで動的に増やした分の情報がPOSTされず
もともとあったtextboxに入力した1件ぶんしかPOSTされていません。
どうしたらコントローラーにすべてのtestNoをPOSTすることができるでしょうか?
※入力フォームをなぜかテーブルで作ってしまっているのはスルーしてください・・・
多分影響はないと思いますが・・・
※該当箇所以外は省略させてください。
・spring boot
・javaScript
・HTML
・thymleaf
該当のソースコード
js
1var input_count = 0; 2function add() { 3 input_count = input_count +1 ; 4 5 var ele = document.createElement("div"); 6 ele.innerHTML = "<input type='text' name='testNoList[" + input_count + "].testNo' th:field='*{testNoList[" + input_count + "].testNo}'>"; 7 8 var parent_object = document.getElementById("piyo"); 9 parent_object.appendChild(ele); 10} 11
html
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <link href="/css/Style.css" th:href="@{/css/Style.css}" rel="stylesheet"></link> 7 <script src="/js/use.js" th:src="@{/js/use.js}"></script> 8 9 <title>利用開始</title> 10 11 </head> 12 13 <body> 14 15 <table> 16 <form name= form1 action="#" method="post" th:action= "@{/Use/submit}" th:object= "${historyForm}"> 17 <tr> 18 ~userId の入力テキストボックス 19 </tr> 20 21 <tr> 22 ~itemID の入力テキストボックス 23 24 </tr> 25 26 27 <tr id="testNo_input"> 28 <th class="login_field">テストコード <a href="javascript: void(0);" onclick="add();" tabIndex=-1> +追加</a> 29 </th> 30 <td> 31 <input type="text" id="testNo[0]" th:name="testNoList[0].testNo" onkeyup="fieldChanged();" onchange="fieldChanged();" th:field="*{testNoList[0].testNo}"></input> 32 <div id="piyo"></div> 33 </td> 34 </tr> 35 36 37 <tr> 38 ~date の入力テキストボックス 39 </tr> 40 41 <tr> 42 <td colspan="2"> 43 <br> 44 <input type="submit" value="この内容で登録する" id="submit"> 45 </td> 46 </tr> 47 48 </form> 49 </table> 50 </body> 51</html>
historyForm
1 2package springbootapp.form; 3 4import java.io.Serializable; 5import java.util.List; 6 7import javax.validation.constraints.NotNull; 8 9import lombok.Data; 10 11@Data 12public class HistoryForm implements Serializable { 13 14 private static final long serialVersionUID = 1L; 15 16 @NotNull 17 private String userId; 18 19 @NotNull 20 private String itemId; 21 22 private List<TestNoList> testNoList; 23 24 @NotNull 25 private String date; 26 27 28 @Data 29 public static class TestNoList implements Serializable { 30 private String testNo; 31 } 32}
controller
1@RequestMapping(value = "Use/submit", method = RequestMethod.POST) 2 public ModelAndView create(@Valid @ModelAttribute HistoryForm historyForm,ModelAndView mv,Model model) { 3 4 for(int n=0; n<=historyForm.getTestNoList().size() -1; n++) { 5 ~~処理 6 } 7 8 9 return mv; 10 }
試したこと
testNoを配列型にしてみたり
String[] testNo;
jsで作成するInnerHTMLをいろいろといじってはみましたが
(th:fieldをなくしてみたり足してみたり)
どうやっても最初の要素(0番目)しかPOSTできていないようです。
jsで動的に追加された要素がFormタグの外側だとPOSTされない
という記事もみましたので
F12の管理者ツールでDOM Explorerをみたところ、きちんとFormタグの中には入っていました。
何日も詰まってしまっています。。。
助けてください
回答1件
あなたの回答
tips
プレビュー