質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Q&A

解決済

1回答

21431閲覧

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

kirby_candypop

総合スコア34

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

0グッド

1クリップ

投稿2019/03/07 01:45

編集2019/03/07 01:51

前提・実現したいこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

ベストアンサー

thymeleafを使って作成したテンプレートファイル(*.html)はサーバーサイドでレンダリングされた後、ブラウザで表示されます。
ブラウザに表示されたページのソースコードを見てみるとth:textth: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タグがいけなかったんですね。。。 レイアウトは後で直そうと思っていたのもよくなかったようです。 詳しいご回答本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問