Spring thymeleaf send javascript dialog message to controller

Question

A table shows a list of records, and each has a accept reject button.

When reject is clicked, a javascript prompt appears , to type in reject reason.

The reject reason + record ID needs to be sent over to the controller.

<script>
    <!-- prompt a box to type in reject reason -->
    function rejectPrompt() {
        var txt;
        var rejectMsg = prompt("Please enter your Reject message:", " ");
        document.getElementById("rejectMsg").innerHTML = rejectMsg;
    }
</script>

​

/*table to show record accept-reject button*/
<td>
    <form action="#" data-th-action="@{/accountantApplication}" method="post">
        <input type="hidden" name="id" th:value="${acc.id}" />
        <input type="hidden" id="rejectMsg" name="rejectMsg" th:value="${acc.id}" />                                                     
        <button type="submit" name="action" value="Accept">Accept</button>
        <button type="submit" name="action" onclick="rejectPrompt()" value="Reject">Reject</button>
    </form>
</td>

​

@PostMapping(value="/accountantApplication", params="action=Reject")
public ModelAndView Reject(@RequestParam String id,@RequestParam String rejectMsg) {
    ModelAndView modelAndView = new ModelAndView();

    System.out.println("rejectMsg:"+rejectMsg);
    System.out.println("id:"+id);

    accountantService.rejectAccountant(id);
    modelAndView.setViewName("RejectAccountant");
    return modelAndView;
}

Issue is , the reject message does not reach the controller . Only the correct ID is sent over. How do i send id and message across?

Or if there is a better way to implement it , do advice. Thanks so much!

Answer 1

Setting document.getElementById("rejectMsg").innerHTML = rejectMsg is like the HTML:

 <input type="hidden" id="rejectMsg" name="rejectMsg" value="someAccId">Some rejectMsg</input>

In order to have "Some rejectMsg" sent to the server you'll have to set the value of the <input> :

document.getElementById("rejectMsg").value = rejectMsg

Note that this will override the effect th:value="${acc.id}" in the <input id="rejectMsg">