[Spring Boot+thymleaf] jsで動的に追加したinput要素のPOSTができない

テストコード\t\t\t\t\t\t　＋追加\r\n\t\t\t\t\t	\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t

テストコード\t\t\t\t\t\t　＋追加\r\n\t\t\t\t\t

\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t

\r\n\t\t\t\t\t

\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t

前提・実現したいこと

プログラミング全般暦の浅い初心者です。
備品管理システムのような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タグの中には入っていました。

何日も詰まってしまっています。。。
助けてください

yu-smc

2019/03/07 02:34

環境はInternet Explorerですか？全てのブラウザでPOSTされない状況でしょうか。

kirby_candypop

2019/03/07 02:39

Internet Explorerです。念のためChromeでは確認しましたが同じように1件しかPOSTされませんでした。

yu-smc

2019/03/07 02:51

IEだけとなるともしかすると、と思ったのですが、Chromeでも同じとなるとちょっとわからないですね。。時間見つけてまた考えてみます。

kirby_candypop

2019/03/07 03:00

すいません。ありがとうございました！

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

回答1件

ベストアンサー

thymeleafを使って作成したテンプレートファイル(*.html)はサーバーサイドでレンダリングされた後、ブラウザで表示されます。
ブラウザに表示されたページのソースコードを見てみるとth:textやth:actionといったthymeleafの属性は消えていることが確認できると思います。
なのでJavaScriptを使って動的に追加する要素にth:fieldのようなthymeleafの属性を付けても動作しません。

テンプレートの下記の行が最終的にどのようなhtmlになっているか確認し、これと同じようなinputタグをJavascriptで組み立ててください。

<input type="text" id="testNo[0]" th:name="testNoList[0].testNo" onkeyup="fieldChanged();" onchange="fieldChanged();" th:field="*{testNoList[0].testNo}"></input>

追記 2019/03/14

少し調べてみましたが、Spring Bootやthymeleafの問題というよりもhtmlとJavaScriptの書き方の方に原因があったようです。
下記のようにhtmlとJavaScriptの書き方を変えれば配列を送信できました。
大きな変更点はtableタグの位置です。今まではformタグの外側にありましたが、それをformタグの内側へ移動させています。

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4    <meta charset="UTF-8">
5    <title>利用開始</title>
6    <script type="text/javascript">
7        function add() {
8            var inputCount = document.getElementsByClassName("testNo").length;
9            var input = document.createElement("input");
10            input.setAttribute("type", "text");
11            input.setAttribute("id", "testNoList" + inputCount + ".testNo");
12            input.setAttribute("class", "testNo");
13            input.setAttribute("name", "testNoList[" + inputCount + "].testNo")
14            input.setAttribute("value", "");
15            var ele = document.createElement("div");
16            ele.appendChild(document.createTextNode(inputCount + ". "));
17            ele.appendChild(input);
18            document.getElementById("piyo").appendChild(ele);
19        }
20    </script>
21</head>
22<body>
23<form name="form1" action="#" method="post" th:action="@{/Use/submit}" th:object="${historyForm}">
24    <table>
25        <tr>
26            <td>～userId の入力テキストボックス</td>
27            <td>
28                <input type="text" th:field="*{userId}"/>
29            </td>
30        </tr>
31        <tr>
32            <td>～itemID　の入力テキストボックス</td>
33            <td>
34                <input type="text" th:field="*{itemId}"/>
35            </td>
36        </tr>
37        <tr id="testNo_input">
38            <td class="login_field">テストコード <a href="#" id="addInput" tabIndex="-1">＋追加</a></td>
39            <td>
40                <div>
41                    0. <input class="testNo" type="text" th:field="*{testNoList[0].testNo}"/>
42                </div>
43                <div id="piyo"></div>
44            </td>
45        </tr>
46        <tr>
47            <td>～date の入力テキストボックス</td>
48            <td>
49                <input type="text" th:field="*{date}"/>
50            </td>
51        </tr>
52        <tr>
53            <td colspan="2">
54                <input type="submit" value="この内容で登録する" id="submit">
55            </td>
56        </tr>
57    </table>
58</form>
59<script type="text/javascript">
60    document.getElementById("addInput").addEventListener("click", function (e) {
61        add();
62    }, false);
63</script>
64</body>
65</html>

Java(Spring Boot)側のコードは修正していませんが、確認用に下記のコードを追記しています。

java
1@PostMapping("Use/submit")
2public ModelAndView create(@Valid @ModelAttribute HistoryForm historyForm, ModelAndView mv) {
3    System.out.println(historyForm);
4    System.out.println("size:" + historyForm.getTestNoList().size());
5    historyForm.getTestNoList().forEach(a -> System.out.println("testNo:" + a.getTestNo()));
6    mv.setViewName("history_confirm");
7    return mv;
8}

この状態で動かしてみると

コンソールには以下の内容が出力されます。

HistoryForm(userId=100, itemId=101, testNoList=[HistoryForm.TestNoList(testNo=a), HistoryForm.TestNoList(testNo=bb), HistoryForm.TestNoList(testNo=ccc), HistoryForm.TestNoList(testNo=dddd), HistoryForm.TestNoList(testNo=eeeee), HistoryForm.TestNoList(testNo=ffffff)], date=103)
size:6
testNo:a
testNo:bb
testNo:ccc
testNo:dddd
testNo:eeeee
testNo:ffffff

以上ご確認ください。

投稿2019/03/13 14:20

編集2019/03/14 14:26

rubytomato

総合スコア1752

kirby_candypop

2019/03/14 00:24 編集

ご回答ありがとうございます。 DOM Explorerで確認したところ、 <input name="testNoList[0].testNo" id="testNo[0]" onkeyup="fieldChanged();" onchange="fieldChanged();" type="text" value=""> となっていましたので jsを下記のように編集しました ele.innerHTML = "<td><input type='text' id='testNo[" + input_count + "]' name='testNoList[" + input_count + "].testNo' onkeyup='fieldChanged();' onchange='fieldChanged();' value=''></td>"; これによって生成されるHTMLは <input name="testNoList[1].testNo" id="testNo[1]" onkeyup="fieldChanged();" onchange="fieldChanged();" type="text" value=""> こちらです。しかしこれでもうまくいかず、POSTされたtestNoList.size()は1になってしまいます。

kirby_candypop

2019/03/15 00:29

やりたかったことができました！！！関係ないとおもっていたTableタグがいけなかったんですね。。。レイアウトは後で直そうと思っていたのもよくなかったようです。詳しいご回答本当にありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

～userId の入力テキストボックス	\r\n \r\n
～itemID　の入力テキストボックス	\r\n \r\n
テストコード＋追加	\r\n \r\n 0. \r\n \r\n \r\n
～date の入力テキストボックス	\r\n \r\n
\r\n \r\n

前提・実現したいこと

該当のソースコード

試したこと

関連した質問