HTML内で選択した値をJavaScriptでFormに格納してPOSTで受け取るという処理。
HTML Thymeleaf
<div id="joinDialogBox" style="display:none">
<form th:action='@{/joinRoom/moving}' th:object="${sendJoinRoomForm}" method= 'post'>
<input id="joinPassword" th:field='*{joinPassword}' type='hidden'>
<input id="joinId" th:field='*{joinId}' type='hidden' >
<button>参加する!</button>
</form>
</div>
Controller
@PostMapping("/joinRoom/moving")
public String joinRoom_moving(@Valid @ModelAttribute("sendJoinRoomForm") SendJoinRoomForm sendJoinRoomForm, BindingResult result) {
if(result.hasErrors()) {
System.out.println("nulldesuyo");
return "redirect:/joinRoom";
}
System.out.println(sendJoinRoomForm.getJoinId());
return "/home";
}
JavaScriptでクリックした値をjoinIdに格納したい。
結果はtextContentとvalueで結果が変わった。
textContentに直接値を入れるとController側ではnullになる。
valueだと値を受け取れる。
<input>: 入力欄(フォーム入力)要素 - HTML: HyperText Markup Language | MDN
text:既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。
value:入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの HTMLInputElement
オブジェクトの value
プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。
ひとまず違いは分かりましたが、なぜtextはダメなのでしょうか。
未解決でした。