从百里香发送参数到javascript

Question

I 'm writing a project based on Thymeleaf and I stuck with such a problem. I have a form which is supposed to be send on back-end. But before sending I have to perform some calculations with pages with the hepl of JS. So I decided to do something like that:

   <form th:action= "'javascript:sendSearchRequest('this.form', '+${currentPage}+', '+${selectedPageSize}+')"

So in this case it seems to be impossible, because this.form can not be processed. Then I tried another approach:

 <button id="searchButton" class="btn btn-default" type="submit"
                        onclick="return sendSearchRequest(this.form, this.currentPage, this.selectedPageSize)">Search
 </button>

This time I cannot work with currentPage and selectedPageSize parameters, because I could only call for them only from thymleaf operators, like th:onclick for example.

So here is my question: is it possible to send both form parameter and some parameters from model like ${currentPage} in my example

Answer 1

You could add them as fields to your form (and access them in you sendSearchRequest ).

<input type="hidden" th:value="${currentPage}" id="currentPage" />
<input type="hidden" th:value="${selectedPageSize}" id="selectedPageSize"  />

or as data attributes on your form tag.

<form th:data-current-page="${currentPage}" th:selected-page-size="${selectedPageSize}" ... 

I think you could fix your button click as well, to look like this:

<button id="searchButton" class="btn btn-default" type="submit" th:onclick="|return sendSearchRequest(this.form, ${currentPage}, ${selectedPageSize})|">
    Search
</button>