How to store multiple checkbox values from a html table and submit it

Viewed 26

I have a table in the following format:

 <thead class="thead-dark">
                <tr>
                    <th>Book ID</th>
                    <th>Title</th>
                    <th>Genre</th>
                    <th>Author</th>
                    <th>Edition</th>
                    <th>Borrow Book</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="book: ${filteredBooks}">
                    <td th:text="${book.title}">Title</td>
                    <td th:text="${book.title}">Title</td>
                    <td th:text="${book.genre}">Genre</td>
                    <td th:text="${book.author}">Author</td>
                    <td th:text="${book.edition}">Edition</td>
                    <td>
                        
                        <input type="checkbox" name="ifBorrowed" th:value="${book.ifBorrowed}"/>
                        
                        
                    </td>
                </tr>
            </tbody>
             <div>
<form th:action="@{/set_if_borrowed/}+${book.bookId}">
                <button type="submit" onClick="submit()" class="btn btn-primary">Add to Cart</button>
</form>
            </div>
        </table>

I need to capture the values of all the checked checkboxes and send all of them to the backend. How do I code the button to submit by capturing all the checkbox values along with the book Ids to the backend URL.

The following is my backend code.

@GetMapping("/set_if_borrowed/")
    @ResponseBody
    public void getIfBorrowedBook(Model model, @RequestParam List<Integer> bookId, @RequestParam List<String> ifBorrowed) {

        System.out.println(bookId+" "+ifBorrowed);

        

    }

Basically I need the GET request URL to look like

/set_if_borrowed?bookId=1&bookId=2&ifBorrowed=true&ifBorrowed=false

if the checked values are bookId=1 and bookId=2

0 Answers
Related