Как эксклюзивно отправлять заполненные поля формы в качестве параметров запроса через метод формы GET?

Question

Я использую Java 11, SpringBoot и Thymeleaf.

У меня есть эта форма:

<form th:action="@{/accommodations/search}" th:object="${filter}" method="get">
    <div class="form-row">
        <div class="form-group col-lg-6">
            <label for="checkin">Checkin</label>
            <input class="form-control" th:field="*{checkin}" type="date" id="checkin">
        </div>

        <div class="form-group col-lg-6">
            <label for="checkout">Checkout</label>
            <input class="form-control" th:field="*{checkout}" type="date" id="checkout">
        </div>
    </div>
    <div class="form-group">
        <label for="type">Type:</label>
        <select class="form-control" th:field="*{type}" id="type">
            <option th:each="type : ${accommodationTypes}"
                    th:value="${type}"
                    th:text="${type.type}"></option>
        </select>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="pricePerNight">Price Per Night:</label>
            <input class="form-control" th:field="*{pricePerNight}" type="number" id="pricePerNight">
        </div>
        <div class="form-group col-md-6">
            <label for="guests">Guests:</label>
            <input class="form-control" th:field="*{guests}" type="number" id="guests">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="country">Country:</label>
            <input class="form-control" th:field="*{country}" type="text" id="country">
        </div>
        <div class="form-group col-md-6">
            <label for="city">City:</label>
            <input class="form-control" th:field="*{city}" type="text" id="city">
        </div>
    </div>
    <button type="submit" class="btn btn-success">Search</button>
</form>

И я хотел бы отправить значения, вставленные в поля, как запрос параметры этой конечной точки контроллера:

@GetMapping("/accommodations/search")
public String accommodationSearch(@Valid AccommodationPaging accommodationPaging,
                                  @ModelAttribute("filter") AccommodationFilter filter,
                                  Model model) {
    Page<AccommodationDto> accommodations = this.accommodationService.searchAccommodations(accommodationPaging, filter);
    model.addAttribute("accommodations", accommodations);
    model.addAttribute("accommodationTypes", AccommodationType.values());
    return ACCOMMODATIONS_VIEW;
}

Это работает, только если я заполняю все поля формы. Если я не заполняю все поля, скажем, что я заполняю только поля "страна" и "город", запрос будет отправлен по следующему адресу:

/ размещение / поиск? Checkin = & checkout = & type = WHOLE_APARTMENT & pricePerNight = & гости = & страна = Италия и город = Рим

Как вы можете видеть, все остальные поля пусты, но пустые параметры запроса по-прежнему отправляются, а не отправляются вообще. Как я могу исправить это так, чтобы в этом сценарии вместо этого отправлялся запрос:

/ размещение / поиск? Type = WHOLE_APARTMENT & country = Италия & city = Rome

Answer 1

Нашел решение, при отправке достаточно установить "отключено" все пустые входы. См. Следующий скрипт:

<script th:inline="javascript">
jQuery(document).ready(function($){
    $("#filterModal").submit(function() {
        $(this)
            .find(":input")
            .filter(function(){ return !this.value; })
            .attr("disabled", "disabled");
        return true;
    });
    $("#filterModal")
        .find( ":input" )
        .prop( "disabled", false );
});</script>

, где «filterModal» следует заменить на идентификатор формы.