JavaScriptでFormに値を格納して送信する in SpringBoot

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>&colon; 入力欄（フォーム入力）要素 - HTML&colon; HyperText Markup Language | MDN

text:既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。

value:入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの HTMLInputElement オブジェクトの value プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。

ひとまず違いは分かりましたが、なぜtextはダメなのでしょうか。

未解決でした。