質問編集履歴

1

ソースコードの追加

2020/07/28 09:22

投稿

k-kenta
k-kenta

スコア2

test CHANGED
File without changes
test CHANGED
@@ -10,32 +10,216 @@
10
10
 
11
11
 
12
12
 
13
- ### 発生している問題・エラーメッセージ
14
-
15
- 入力画面におて、性別生年月日の表示はうまくいくのですが
16
-
17
- 確認画面での表示がまくいきません。
18
-
19
-
20
-
21
- ###質問たいこと
22
-
23
- テキストボックスは入力したものを出力させてば良いので、理屈はわかるのですが
24
-
25
- ボタンなど選択式だと途端にわからなくなります。
26
-
27
- そこで
28
-
29
- ①ラジオボタン、生年月日の入力内容を確認画面させたい。どうすればよいですか?
30
-
31
- ②また、そのようになる理屈も教えて頂ければ幸いです。
32
-
33
-
34
-
35
- 初心者の質問で申し訳ありません。
36
-
37
- 「thymeleaf+入力フォーム」や「thymeleaf+ラジオボタン」で調べたのですが
38
-
39
- まったくわかりませんでした。
40
-
41
- よろしくお願いいたします。
13
+
14
+
15
+ 【実現した
16
+
17
+ ・入力画面においてプルダウン生年月日を入力できるよになる
18
+
19
+ ・確認画面において入力した生年月日を表示できるようにする
20
+
21
+ ・ただ、1月~12月をhtmlで直書きするのではなく、javaでリストに設定してthymeleafのth:each属性で表示するようにする
22
+
23
+
24
+
25
+
26
+
27
+ 【ソースコード】
28
+
29
+ <入力画面>
30
+
31
+ <!DOCTYPE html>
32
+
33
+ <html xmlns:th="http://www.thymeleaf.org">
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8">
38
+
39
+ <title>登録フォーム</title>
40
+
41
+ </head>
42
+
43
+ <body>
44
+
45
+ <h1>お客様情報の入力</h1>
46
+
47
+ <form method="POST" action="output.html" th:action="@{output}">
48
+
49
+ <p>お名前</p><input type="text" name="name">
50
+
51
+ <br>
52
+
53
+ <p>性別</p>
54
+
55
+ <input type="radio" name="sex" value="male">男
56
+
57
+ <input type="radio" name="sex" value="female">女
58
+
59
+ <br>
60
+
61
+ <p>生年月日</p>
62
+
63
+ <select name="year"><option></option></select>年
64
+
65
+ <select name="month"><option></option></select>月
66
+
67
+ <select name="day"><option></option></select>日
68
+
69
+ <p>電話番号</p><input type="text" name="tel">
70
+
71
+ <br>
72
+
73
+ <input type="submit" name="登録">
74
+
75
+ </form>
76
+
77
+ </body>
78
+
79
+ </html>
80
+
81
+
82
+
83
+
84
+
85
+ <確認画面>
86
+
87
+ <!DOCTYPE html>
88
+
89
+ <html xmlns:th="http://www.thymeleaf.org">
90
+
91
+ <head>
92
+
93
+ <meta charset="UTF-8">
94
+
95
+ <title>確認画面</title>
96
+
97
+ </head>
98
+
99
+ <body>
100
+
101
+ <h1>ご入力の確認</h1>
102
+
103
+ <p>お名前:<span th:text="${name}"> 100</span></p>
104
+
105
+ <p>性別:<div th:switch="${sex}">
106
+
107
+ <p th:case ="1">男</p>
108
+
109
+ <p th:case ="2">女</p>
110
+
111
+ </div>
112
+
113
+ <p>生年月日:</p>
114
+
115
+ <p>電話番号:<span th:text="${tel}"> テスト</span></p>
116
+
117
+ <a href="index.html" th:href="@{input}"> 顧客の入力に戻る</a>
118
+
119
+ </body>
120
+
121
+ </html>
122
+
123
+
124
+
125
+
126
+
127
+
128
+
129
+ 【コントローラー】
130
+
131
+ package com.example.demo.controller;
132
+
133
+
134
+
135
+ import org.springframework.stereotype.Controller;
136
+
137
+ import org.springframework.ui.Model;
138
+
139
+ import org.springframework.web.bind.annotation.RequestMapping;
140
+
141
+ import org.springframework.web.bind.annotation.RequestParam;
142
+
143
+
144
+
145
+ @Controller
146
+
147
+ public class ClientController {
148
+
149
+
150
+
151
+ @RequestMapping("/input")
152
+
153
+ public String index() {
154
+
155
+ return "index.html";
156
+
157
+ }
158
+
159
+
160
+
161
+ @RequestMapping("/output")
162
+
163
+ public String result(@RequestParam("name")String name,
164
+
165
+ @RequestParam("tel") String tel,
166
+
167
+ @RequestParam("sex") String sex,Model model) {
168
+
169
+ model.addAttribute("name", name);
170
+
171
+ model.addAttribute("tel", tel);
172
+
173
+ if("male".equals(sex)){
174
+
175
+ model.addAttribute("sex", 1);
176
+
177
+ }else if("female".equals(sex)){
178
+
179
+ model.addAttribute("sex", 2);
180
+
181
+ }
182
+
183
+ return "output.html";
184
+
185
+ }
186
+
187
+ }
188
+
189
+
190
+
191
+
192
+
193
+ 【DemoApplication.java】
194
+
195
+ package com.example.demo;
196
+
197
+
198
+
199
+ import org.springframework.boot.SpringApplication;
200
+
201
+ import org.springframework.boot.autoconfigure.SpringBootApplication;
202
+
203
+
204
+
205
+ @SpringBootApplication
206
+
207
+ public class DemoApplication {
208
+
209
+
210
+
211
+ public static void main(String[] args) {
212
+
213
+ SpringApplication.run(DemoApplication.class, args);
214
+
215
+ }
216
+
217
+
218
+
219
+ }
220
+
221
+
222
+
223
+ 未熟な故、回答の表現があいまいになり、ご理解いただけない部分があるかもしれませんが
224
+
225
+ できるだけお伝えさせていただきます。よろしくお願いいたします。