HTMX Form and Select option with Springboot & Thymleaf

Question

I want to submit a form with date range & also provide page size from a distinct select option element dynamically using htmx

But HTMX is not passing the value of Select option elements to my java Controller

HTML:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Data List</title>
<link th:href="@{/css/bootstrap.css}" th:rel="stylesheet" />
<link th:href="@{/fontawesome/css/all.css}" rel="stylesheet" />
<script th:src="@{/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/fontawesome/js/all.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/htmx.min.js}"></script>
<body>
    <div
        class="container rounded-4 p-2 mt-2 mx-auto shadow-lg bg-light bg-gradient border">
        <h2>Search List</h2>
        <form th:action="@{/formData}" method="post" th:object="${formData}">
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">Start
                        Date</label>
                </div>
                <div class="col-auto">
                    <input type="datetime-local" class="form-control"
                        th:field="*{startDate}" />
                </div>
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">End Date</label>
                </div>
                <div class="col-auto">
                    <input type="datetime-local" class="form-control"
                        th:field="*{endDate}" />
                </div>
                <div class="col-auto">
                    <input type="submit" id="submit" class="btn btn-primary"
                        th:hx-post="@{/formData}" hx-include="#range.value"
                        hx-trigger="click" hx-target="#tbody" hx-swap="innerHTML" />
                </div>
            </div>
        </form>
    </div>
    <div
        class="container rounded-4 p-2 mt-2 mx-auto shadow-lg bg-light bg-gradient border">
        <div class="btn-toolbar justify-content-between rounded-4"
            role="toolbar">
            <select id="range" class="input-group form-select-sm"
                aria-label=".form-select-sm example">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
            </select> <input type="text" id="tableSearch" placeholder="Search" />
        </div>
    </div>
    <div id="popUpDetails" class="d-none"></div>
</body>
</html>

Controller:

package in.sbigeneral.InsureMO.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import in.sbigeneral.InsureMO.model.RequestData;

@Controller
public class APIController {

    @PostMapping("/formData")
    public String form(@ModelAttribute RequestData requestData, Model model) {
        System.out.println("Form Data : " + requestData);
        return "tableData";
    }

}

Model:

package in.sbigeneral.InsureMO.model;

import java.time.LocalDateTime;

import org.springframework.format.annotation.DateTimeFormat;

public class RequestData {

    @DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm")
    private LocalDateTime startDate;

    @DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm")
    private LocalDateTime endDate;

    private String range;

    public RequestData() {
        super();
    }

    public RequestData(LocalDateTime startDate, LocalDateTime endDate, String range) {
        super();
        this.startDate = startDate;
        this.endDate = endDate;
        this.range = range;
    }

    public LocalDateTime getStartDate() {
        return startDate;
    }

    public void setStartDate(LocalDateTime startDate) {
        this.startDate = startDate;
    }

    public LocalDateTime getEndDate() {
        return endDate;
    }

    public void setEndDate(LocalDateTime endDate) {
        this.endDate = endDate;
    }

    public String getRange() {
        return range;
    }

    public void setRange(String range) {
        this.range = range;
    }

    @Override
    public String toString() {
        return "RequestData [startDate=" + startDate + ", endDate=" + endDate + ", range=" + range + "]";
    }
}

Result

Form Data : RequestData [startDate=2023-06-01T11:50, endDate=2023-06-03T11:50, range=null]

Range even though by default the select dropdown has value of 10 htmx is not passing it to controller.

Can you try with `hx-include="#range"` ? – Wim Deblauwe Jun 09 '23 at 11:30 — Wim Deblauwe, Jun 09 '23 at 11:30

score 0 · Answer 1 · answered Jun 19 '23 at 15:16

HTMX to be used in form tag instead of submit button for the first form tag

<form th:action="@{/formData}" method="post" th:object="${formData}" hx-post="/formData" hx-include="#range" hx-trigger="click[enterKey]" hx-target="#tbody" hx-swap="innerHTML" >
  <div class="row g-3 align-items-center">
    <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">Start Date</label>
      </div>
      <div class="col-auto">
        <input type="datetime-local" class="form-control" th:field="*{startDate}" />
      </div>
      <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">End Date</label>
      </div>
      <div class="col-auto">
        <input type="datetime-local" class="form-control" th:field="*{endDate}" />
      </div>
      <div class="col-auto">
        <input type="submit" id="submit" class="btn btn-primary"/>
      </div>
    </div>
</form>

Then wrapping the select tag with form tags and defining the same thymleaf object.

<form class="btn-toolbar justify-content-between rounded-4" role="toolbar hx-post="@{/formData}" hx-include="#range.value" hx-trigger="change" hx-target="#tbody" hx-swap="innerHTML" >
  <select id="range" class="input-group form-select-sm" aria-label=".form-select-sm example" th:field="*{range}">
    <option th:value="10">10</option>
    <option th:value="20">20</option>
    <option th:value="30">30</option>
   </select>
</form>

Form Data : RequestData [startDate=2023-06-01T11:50, endDate=2023-06-03T11:50, range=10]

`hx-trigger="click"` was posting data even with a single click on input before entering data so I changed it to `hx-trigger="click[enterKey]"` but its still not working by clicking enter key so it's new problem — Vinay Mhatre, Jun 19 '23 at 15:22

HTMX Form and Select option with Springboot & Thymleaf

1 Answers1