Q&A
実装されているThymeleafテンプレート(HTML)のラジオボタンの部分と、それを受け取るControllerの実装があると回答が得られるかもしれません。
前提・実現したいこと
Thymeleaf初心者です。
名前・性別・生年月日・電話番号を入力する入力フォームを作りたいと思っています。
（名前・電話番号はテキストボックス、性別はラジオボタン、生年月日はプルダウン）
【実現したいこと】
・入力画面においてプルダウンで生年月日を入力できるようになる
・確認画面において入力した生年月日を表示できるようにする
・ただし、1月～12月をhtmlで直書きするのではなく、javaでリストに設定してthymeleafのth:each属性で表示するようにする
【ソースコード】
<入力画面>
＜確認画面＞
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>確認画面</title> </head> <body> <h1>ご入力の確認</h1> <p>お名前:<span th:text="${name}"> 100</span></p> <p>性別:<div th:switch="${sex}"> <p th:case ="1">男</p> <p th:case ="2">女</p> </div> <p>生年月日:</p> <p>電話番号:<span th:text="${tel}"> テスト</span></p> <a href="index.html" th:href="@{input}"> 顧客の入力に戻る</a> </body> </html>【コントローラー】
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class ClientController {
@RequestMapping("/input")
public String index() {
return "index.html";
}
@RequestMapping("/output")
public String result(@RequestParam("name")String name,
@RequestParam("tel") String tel,
@RequestParam("sex") String sex,Model model) {
model.addAttribute("name", name);
model.addAttribute("tel", tel);
if("male".equals(sex)){
model.addAttribute("sex", 1);
}else if("female".equals(sex)){
model.addAttribute("sex", 2);
}
return "output.html";
}
}
【DemoApplication.java】
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
未熟な故、回答の表現があいまいになり、ご理解いただけない部分があるかもしれませんが
できるだけお伝えさせていただきます。よろしくお願いいたします。
上記コメントにもございますが、現行で作成しているソースの掲載をした方がいいです。
あと確認画面に表示したいとのことですが、表示の方法についても色々あると思います。
・ラジオで選択された要素のラベルを確認画面で表示したい
・ラジオ要素全てを確認画面で表示した上で、選択された要素が何かわかるように表示したい
等
質問の表現が曖昧なので、わかりません。
せめて入力画面と確認画面のhtmlソースの掲載をした方が良いかと思われます。
もしくは、addObjectやaddAttributeの理屈がわからないのでしょうか？
ご返信ありがとうございます。
すいませんラジオボタンは解決いたしました。
しかし、生年月日はわからないので質問させていただければと思います。
【実現したいこと】
・入力画面においてプルダウンで生年月日を入力できるようになる
・確認画面において入力した生年月日を表示できるようにする
・ただし、1月～12月をhtmlで直書きするのではなく、javaでリストに設定してthymeleafのth:each属性で表示するようにする
【ソースコード】
<入力画面>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登録フォーム</title>
</head>
<body>
<h1>お客様情報の入力</h1>
<form method="POST" action="output.html" th:action="@{output}">
<p>お名前</p><input type="text" name="name">
<br>
<p>性別</p>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<br>
<p>生年月日</p>
<select name="year"><option></option></select>年
<select name="month"><option></option></select>月
<select name="day"><option></option></select>日
<p>電話番号</p><input type="text" name="tel">
<br>
<input type="submit" name="登録">
</form>
</body>
</html>
＜確認画面＞
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
</head>
<body>
<h1>ご入力の確認</h1>
<p>お名前:<span th:text="${name}"> 100</span></p>
<p>性別:<div th:switch="${sex}">
<p th:case ="1">男</p>
<p th:case ="2">女</p>
</div>
<p>生年月日:</p>
<p>電話番号:<span th:text="${tel}"> テスト</span></p>
<a href="index.html" th:href="@{input}"> 顧客の入力に戻る</a>
</body>
</html>
【コントローラー】
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class ClientController {
@RequestMapping("/input")
public String index() {
return "index.html";
}
@RequestMapping("/output")
public String result(@RequestParam("name")String name,
@RequestParam("tel") String tel,
@RequestParam("sex") String sex,Model model) {
model.addAttribute("name", name);
model.addAttribute("tel", tel);
if("male".equals(sex)){
model.addAttribute("sex", 1);
}else if("female".equals(sex)){
model.addAttribute("sex", 2);
}
return "output.html";
}
}
【DemoApplication.java】
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
未熟な故、回答の表現があいまいになり、ご理解いただけない部分があるかもしれませんが
できるだけお伝えさせていただきます。よろしくお願いいたします。
なるほど。
確認しましたところ、ラジオはth:caseで判定しているのですね。
男・女どちらしか表示しないのであれば、${tel}と同じようにmodel.addAttributeで"男"という値をセットすればよいかと思います。
質問欄が修正可能ですので、できれば質問の修正やソースの追記は質問を修正する形でお願い致します。
あと、th:eachの存在までご存じでしたら、もうちょっとで完成すると思われるのですが、
th:eachの書き方がわからないということでしょうか？
ご回答ありがとうございます。
質問修正させていただきました。
ラジオボタンについてもありがとうございます。
おっしゃる通りでth:eachの書き方がわかりません。
名前や電話番号であれば
「入力画面でテキストボックス表示→入力する→その値をコントローラで確認画面へ→確認画面に表示」
という順序だと認識しているのですが
プルダウンの場合
「入力画面にプルダウンを表示（プルダウンに選択肢が入っている）」
「その値をコントローラで確認画面へ」
という二つの手順のやり方がわからないという状態です。
ご質問への回答がずれていたら申し訳ございません。
よろしくお願いいたします。
別の方が回答してくださったので、書き方はそちらを参考にしてください。
プルダウンでも基本的にはテキストボックスと同様で、選択された値がコントローラーに渡されます。
確認画面は別にプルダウンにしなくてもいいので、
${tel}と同じようにmodel.addAttributeでJava側から値のセットを行えばよいかと思います。
ありがとうございます。
今現状、プルダウンのListでの作り方がわからなくなっています。
確認画面への表示の仕方はおっしゃっていただいたように参考にさせて頂ければと思います。
th:eachの属性にはcollectionを設定します。
その際javaでArrayListを生成してそのインスタンスをaddAttributeで設定してあげればいいです。
回答者様のリンク先で例えるなら、
th:each="job : ${jobList}"
th:value="${job.id}"
[[${job.name}]]
と書かれているので、idとnameのフィールドを持つBeanを定義して、そのListを生成すればいいです。
Listの作成方法は分かりますか？
BeanのList作成方法について質問が上がっていたため、URLを記載しますね。
https://teratail.com/questions/117026
ご丁寧にありがとうございます。
回答者様が送信されたURLをもとに、まずプルダウンの中に選択肢を表示させるように
Listを作成してみたのですが、エラーが発生します。
＜入力画面＞（エラーなし）
<p>生年月日</p>
<select name="year"><option th:each="year : ${yearList}" th:text="${year.number}"> </option></select>年
<select name="month"><option th:each="month : ${monthList}" th:text="${month.number}"></option></select>月
<select name="day"><option th:each="day : ${dayList}" th:text="${day.number}"></option></select>日
＜DemoApplication.java＞（エラーあり）
List<Year> yearList = new ArrayList<Year>();
for(int i = 1; i <= 12; i++){
yearList.add(i);
}
エラー内容：型 List<Year> のメソッド add(int, Year) は引数 (int) に適用できません
そしてBeanについてURLも送っていただき、本当にありがとうございます。
現状Beanが何に使うかもあまりわかっていない状態で
検索してみたのですが「DIをする」などと出て
「入力フォームを作るのにどう役に立つかわからない」となっている状態です。
理解が悪くて申し訳ございません。
よろしくお願いいたします。
また、回答1件頂いたソースコードを入力してました。
エラーは出ませんでしたが、プルダウンに何も表示されない状態でした。
自分の環境の問題等もあるのでしょうか？
Controllerに入力すればよいのかjavaに入力すればよいのかなど
小さいこともわかっていなくて申し訳ありません。
List<Integer>のやり方でやると、エラーにならずにドロップダウンに何も表示されなかったという事ですか？
他の方の回答がなかった場合は、今夜私が環境作って動作確認したソース掲載します。
おっしゃる通りで、List<Integer>のやり方でやると、エラーにならずにドロップダウンに何も表示されませんでした
<Controller>
package com.example.demo.controller;
import java.time.Month;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
@RequestMapping("/input")
public class ClientController {
public String index() {
return "index.html";
List<Month> monthList = new ArrayList<Month>();
for(int i = 1; i <= 12; i++){
//ここでListに追加するインスタンスを生成
Month month = new Month();
// そのインスタンスのnumberに値をセット
month.setNumber(i);
// そのインスタンスをリストに追加
monthList.add(month);
}
}
@RequestMapping("/output")
public String result(@RequestParam("name")String name,
@RequestParam("year")String year,
@RequestParam("tel") String tel,
@RequestParam("sex") String sex,
@RequestParam("mail") String mail,
@RequestParam("comment") String comment,Model model) {
model.addAttribute("name", name);
model.addAttribute("year", year);
model.addAttribute("tel", tel);
if("male".equals(sex)){
model.addAttribute("sex", 1);
}else if("female".equals(sex)){
model.addAttribute("sex", 2);
}
model.addAttribute("mail",mail);
model.addAttribute("comment",comment);
return "output.html";
}
}
エラー：型 Month のインスタンスを生成できません
メソッド setNumber(int) は型 Month で未定義です
となっております。
Monthクラスをjava.time.Monthでimportしてますが、自作したクラスではないですよね？
public class Month{
private int number;
// getter, setter
}
みたいな感じで作らないと、エラーになりますよ。
java.time.MonthクラスにはsetNumber(int)というメソッドは存在しないので
ちなみに、Integerのやり方ででないとのことですが、多分質問者様のソースがおかしい箇所があります。
とりあえず、クラスとメソッドという基本を理解した方が今後のためだと思います。
import文は、そのクラスをインポートしますよという意味なので、自作のMonthクラスを作ったら、importの所をそのクラスに変えるのをお忘れなく。
よくよく見たらいろいろおかしいですね。
例えばindex()メソッド内では、
・for文よりも前にreturn してあるため、そもそもfor文が動かない
・monthListをaddAttributeしていない
回答1件
0
ベストアンサー
Thymeleafでセレクトボックスを使う が参考になるでしょうか。
例えば、月を入力させたいのであれば、
Controllerの実装：
java
1import java.util.Arrays; 2import java.util.List; 3 4import org.springframework.stereotype.Controller; 5import org.springframework.web.bind.annotation.GetMapping; 6import org.springframework.web.bind.annotation.RequestMapping; 7import org.springframework.web.servlet.ModelAndView; 8 9@Controller 10@RequestMapping("wheel") 11public class SampleController { 12 @GetMapping("") 13 public ModelAndView display(ModelAndView mnv) { 14 15 List<Integer> months = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12); 16 mnv.addObject("targetMonth", 7); 17 mnv.addObject("months", months); 18 mnv.setViewName("wheel"); 19 return mnv; 20 } 21 22}
ここから表示する wheel.html にて、Controllerで定義した years の内容を繰り返し表示する方法は、
※ targetMonth は 初期表示させる月の値
html
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6</head> 7<body> 8<select name="month"> 9 <option th:each="month : ${months}" 10 th:value="${month}" 11 th:selected="${month == targetMonth}" 12 th:text="${month}"></option> 13</select> 14</body> 15</html>
投稿2020/07/28 09:27
編集2020/07/29 10:26総合スコア12011
申し訳ございません。知識がなく、それだけでは理解できていない現状です。
とりあえず真似してみたのですがエラーが発生します。
＜入力画面＞（エラーなし）
<p>生年月日</p>
<select name="year"><option th:each="year : ${yearList}" th:text="${year.number}"> </option></select>年
<select name="month"><option th:each="month : ${monthList}" th:text="${month.number}"></option></select>月
<select name="day"><option th:each="day : ${dayList}" th:text="${day.number}"></option></select>日
＜DemoApplication.java＞（エラーあり）
List<Year> yearList = new ArrayList<Year>();
for(int i = 1; i <= 12; i++){
yearList.add(i);
}
エラー内容：型 List<Year> のメソッド add(int, Year) は引数 (int) に適用できません
無知で本当に申し訳ないのですが、エラーの解決法を調べても出てこないので
教えて頂ければ幸いです。
また、このような進め方で会っているのでしょうか？
よろしくお願いいたします。
java.time.Year クラスは int からアウトボクシングできないから
基本的なListの使い方を学んでください。
Listというのは、ざっくり説明すると可変長の配列です。
Stringの配列の場合ですと、[String, String, String...]という風に値が入っていくと思うのですが、
Listも同様です。
今回の場合ですと、
<option th:each="year : ${yearList}" th:text="${year.number}"> </option>
と書かれているので、
numberというプロパティを持ったYearクラスを作成してください。
その後、ループ内では
// Yearクラスの配列のようなもの
List<Year> yearList = new ArrayList<Year>();
for(int i = 1; i <= 12; i++){
// ここでListに追加するインスタンスを生成
Year year = new Year();
// そのインスタンスのnumberに値をセット
year.setNumber(i);
// そのインスタンスをリストに追加
yearList.add(year);
}
と記述すればいいです。([注]上記ソースはインデントのため、全角スペース入れてます。)
配列で例えると、[Year, Year, Year...]みたいになっている状態です。
中のYearはそれぞれnumberのプロパティを持っているような感じです。
現状を理解しました。
わかりやすく教えて頂きありがとうございます。
ただ「numberというプロパティを持ったYearクラスを作成してください。」という意味が
理解できないです。
わかりやすく教えて頂いているのに申し訳ございません。
Listの使い方は検索して少し理解することができました。
numberというプロパティを持ったYearクラスを作成してください。
説明がざっくりしていてすみません。
環境がないものでソースの掲載ができませんが、説明すると
Yearクラスを定義して、その中で変数としてintのnumberを定義します。(numberというプロパティを持ったYearクラスを作成)
そしてメソッドとしては、基本的なgetter, setterを実装します。(lombok使うと便利です。)
これでnumberというプロパティを持ったYearクラスを作成完了です。
今回numberの1つしか持っていないため回答者様のList<Integer>で実装可能ですが、例えばプルダウンの表示値とvalue値を2つの持たせたい時は、別の変数(フィールド)を追加すれば対応できます。
実際にソース書いてなくて恐縮ですが、例としてidとnameのフィールドを持つSampleBeanを作成すると
public class SampleBean {
private String id;
private String name;
// getter, setter
}
みたいな感じです。(エラー出たらすみません。)
ご回答いただきありがとうございます。
lombokをインストールしました。
送っていただいた通り実行してみたのですが
エラーが出てしまいます。
おそらく自分がBeanの必要性、使い方を理解できていないからだと思います。
教えて頂いたのに申し訳ござません。
送っていただいた
// Yearクラスの配列のようなもの
List<Year> yearList = new ArrayList<Year>();
for(int i = 1; i <= 12; i++){
// ここでListに追加するインスタンスを生成
Year year = new Year();
// そのインスタンスのnumberに値をセット
year.setNumber(i);
// そのインスタンスをリストに追加
yearList.add(year);
}
については「yearListに1~12を格納した」と認識しております。
もし、この認識が合っていれば、input画面でyearListをそのまま使うことができないのでしょうか？
「.javaで設定したiの値を、そのままinput.htmlで使用できればよいのではないのか？」というものが
ずっと頭の中にあるので、getter,setter,Beanなどの使い方がわからないのだと感じます。
何度も何度も検索したのですが、自分の理解力がないのか、ヒントになるものはなく、
これだけ皆さんに丁寧に教えて頂いているのに理解できない自分が嫌になります。
本当にお手数おかけして申し訳ございませんが
よろしくお願いいたします。
エラーはなんと出ているのでしょうか？
質問のソースを質問者様が現在作成しているソースコードに修正してください。
その際、ソースを```で囲う(コードの挿入)をしてください。
あと、自分がjavaといっているのはControllerのことですよ。
いろいろとお手伝いいただきまして本当にありがとうございました。
回答者様のソースコードを少し変えて
希望通りに表示・出力することができました。
ただし、言ってくださったとおり、知識が乏しすぎるので
もっと勉強していろんな方法でできるようになります。
本当にありがとうございました。
解決して良かったです。
ちなみに、Integerの方法で解決したのでしょうか？
そうです。Integerの方法で解決いたしました。
そうですか。
現状問題ないようですが、また時間があればgetter, setterのみのBeanの使い方も覚えておくと良いですよ！
解決お疲れ様です。
本当にありがとうございました。。。
あなたの回答
tips
プレビュー
