How to exclusively send filled form fields as query params through form method GET?

Question

I'm using Java 11, SpringBoot and Thymeleaf.

I have this form:

<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>

And I would like to send the values inserted in the fields as query params to this controller endpoint:

@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;
}

This works only if I fill in all the form fields. If I don't fill in all the fields, say I fill in the "country" and "city" fields only, the request will be sent to this:

/accommodations/search?checkin=&checkout=&type=WHOLE_APARTMENT&pricePerNight=&guests=&country=Italy&city=Rome

As you can see all the other fields are empty, but the empty query params are still being sent rather than not being sent at all. How can I fix this so that in this scenario the request is sent to this instead:

/accommodations/search?type=WHOLE_APARTMENT&country=Italy&city=Rome

Answer 1

Found a solution, on submit it is sufficient to set to "disabled" all the empty inputs. See the following script:

<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>

where "filterModal" should be replaced with the id of the form.