Thymeleaf: pass input text as parameter in href

Question

I have a input field, whose value is set by the controller by response.query, within the template I also have two links which perform read and delete calls to the id entered in the query. Here is the template.

<div class="input-group">
        <input type="text" th:value="*{response.query}" />
        <div class="input-group-btn">
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#" th:href="@{/read/{id}(id=response.query)}">Read</a></li>
                <li><a href="#" th:href="@{/delete/{id}(id=response.query)">Delete</a></li>
            </ul>
        </div>
</div>

Unfortunately, the href parameter always gets passed as null. Is there alternate approach to this?

this was very helpful

Hinotori
– Hinotori

2017-05-25 00:20:52 +00:00
Commented May 25, 2017 at 0:20 — Hinotori
– Hinotori, Commented May 25, 2017 at 0:20

Lazar Lazarov · Accepted Answer · 2016-08-01 07:22:38Z

1

Well let me see if I understand what you want :

For example you put '5' in the text input. Now you want to href to:

http://localhost:8080/read/5

And you have a controller which looks something like this :

@RequestMapping(value="/read/{id}", method=RequestMethod.GET)
public String read(@PathVariable String id, Model model) {
  // your logic goes here
  return "read"; 
}

Firstly my suggestion is that you can just change your code from :

<li><a href="#" th:href="@{/read/{id}(id=response.query)}">Read</a></li>

to:

<li><a href="#" th:href="@{/read/{id}(id=${response.query})}">Read</a></li>

answered Aug 1, 2016 at 7:22

Lazar Lazarov

2,5524 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

curious_cat Over a year ago

Yes that is correct I have a controller that looks similar to that, all I want is a input text field binded to a field and two href one to read and one to delete with the field value as parameter in both case.

Lazar Lazarov Over a year ago

So did it worked : replacing the following th:href="@{/read/{id}(id=response.query)} with the th:href="@{/read/{id}(id=${response.query})}"

Hinotori Over a year ago

this is the answer!

sanluck · Accepted Answer · 2016-08-01 07:20:39Z

You can't get response.query because it's on client side then you call it. In your case you need the javascript, which will be construct your link's URL (othervise you need a form to submit value of the input) :

<div class="input-group">
    <input type="text" id="myval" th:value="*{response.query}" />
    <div class="input-group-btn">
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" onclick="onReadClick();" href="#">Read</a></li>
            <li><a href="#" th:href="@{/delete/{id}(id=response.query)">Delete</a></li>
        </ul>
    </div>
</div>   

<script th:inline="javascript">
/*<![CDATA[*/
function onReadClick() {
    var id = $('#myval').value; 
    /*[+
    var myUrl = [[@{/read}]] + id; 
    +]*/
    window.location.href = myUrl;
});
/*]]>*/
</script>

Collectives™ on Stack Overflow

Thymeleaf: pass input text as parameter in href

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related