title: Thymeleaf: How to get the value of an <input> dynamically and then use it to filter a list?
body: <p>I have a clientlist.html page which is defined as such:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot; lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;title&gt;Clienti&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;/webjars/bootstrap/4.5.0/css/bootstrap.min.css&quot; /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a class=&quot;button&quot; th:href=&quot;@{/clients/form}&quot;&gt;Adauga un client nou&lt;/a&gt;
          &lt;label th:for=&quot;txtFilter&quot;&gt;Nume&lt;/label&gt;
          &lt;input th:id=&quot;txtFilter&quot; type=&quot;text&quot; class=&quot;form-control form-control-sm&quot; /&gt;
          &lt;a th:href=&quot;@{/clients/getClientByLastName/{lastName}(lastName=${???})}&quot;&gt;Cauta un client dupa nume&lt;/a&gt;
  
          &lt;div&gt;
              &lt;h2&gt;Lista clienti&lt;/h2&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;ID&lt;/th&gt;
                          &lt;th&gt;Prenume&lt;/th&gt;
                          &lt;th&gt;Nume&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr th:each=&quot;client : ${clients}&quot;&gt;
                          &lt;td th:text=&quot;${client.getClientID()}&quot;&gt;&lt;/td&gt;
                          &lt;td th:text=&quot;${client.getLastName()}&quot;&gt;&lt;/td&gt;
                          &lt;td th:text=&quot;${client.getFirstName()}&quot;&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;a th:href=&quot;@{/clients/form/{id}(id=${client.getClientID()})}&quot;&gt;Editeaza&lt;/a&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;a th:href=&quot;@{/clients/delete/{id}(id=${client.getClientID()})}&quot;&gt;Sterge&lt;/a&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I have an  tag that has a th:href which refers to the method in my ClientController, which is defined like so:</p>
  <pre><code>import com.gestiunezboruri.demo.model.Client;
  import com.gestiunezboruri.demo.service.ClientService;
  import lombok.extern.slf4j.Slf4j;
  import org.slf4j.Logger;
  import org.slf4j.LoggerFactory;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.validation.BindingResult;
  import org.springframework.web.bind.annotation.*;
  import javax.validation.Valid;
  import java.util.List;
  
  @Slf4j
  @Controller
  public class ClientController {
      @Autowired
      ClientService clientService;
  
      Logger logger = LoggerFactory.getLogger(ClientController.class);
  
      @ModelAttribute(&quot;clients&quot;)
      public List&lt;Client&gt; populateClientList() {
          return clientService.findAll();
      }
  
      @RequestMapping(&quot;/clients/getAll&quot;)
      public String renderClientList() {
          return &quot;clientlist&quot;;
      }
  
      @RequestMapping(value = &quot;/clients/form&quot;)
      public String renderClientForm(Model model) {
          model.addAttribute(&quot;client&quot;, new Client());
  
          return &quot;clientform&quot;;
      }
  
      @GetMapping(&quot;/clients/form/{id}&quot;)
      public String getClientById(@PathVariable Long id, Model model) {
          model.addAttribute(&quot;client&quot;, clientService.findById(id));
  
          return &quot;clientform&quot;;
      }
  
      @GetMapping(&quot;/clients/getClientByLastName/{lastName}&quot;)
      public String getClientByLastName(@PathVariable String lastName, Model model) {
          model.addAttribute(&quot;clients&quot;, clientService.findByLastNameLike(lastName));
          for(Client c : clientService.findByLastNameLike(lastName)) {
              log.info(c.toString());
          }
  
          return &quot;clientform&quot;;
      }
  
      //TODO: @GetMapping(&quot;clients/resetFilters&quot;)
  
      @PostMapping(&quot;/clients/save&quot;)
      public String saveClient(@Valid Client client, BindingResult bindingResult) {
          if (bindingResult.hasErrors()){
              return &quot;clientform&quot;;
          }
  
          clientService.save(client);
  
          log.info(&quot;A fost adaugat clientul cu urmatoarele date: ID = &quot; + client.getClientID() + &quot;; Nume = &quot; + client.getLastName() + &quot;; Prenume = &quot; + client.getFirstName());
  
          return &quot;redirect:/clients/getAll&quot;;
      }
  
      @RequestMapping(&quot;/clients/delete/{id}&quot;)
      public String deleteClient(@PathVariable Long id) {
          Client clientSters = clientService.findById(id);
  
          clientService.deleteById(id);
  
          log.info(&quot;A fost sters clientul cu urmatoarele date: ID = &quot; + clientSters.getClientID() + &quot;; Nume = &quot; + clientSters.getLastName() + &quot;; Prenume = &quot; + clientSters.getFirstName());
  
          return &quot;redirect:/clients/getAll&quot;;
      }
  }
  </code></pre>
  <p>Defined within the table tag lies a list of all the clients in the database.</p>
  <p>Then, there is</p>
  <pre><code>&lt;input th:id=&quot;txtFilter&quot; type=&quot;text&quot; class=&quot;form-control form-control-sm&quot; /&gt;
  </code></pre>
  <p>This input is supposed to be used by the user to filter the list by a value he inputs.</p>
  <p>My question is, how can I pass the value of the <code>txtFilter</code> input to the <code>&lt;a th:href=&quot;@{/clients/getClientByLastName/{lastName}(lastName=${???})}&quot;&gt;</code> as a PathVariable? (i.e in the <code>(lastName=${???})</code> part)</p>
  <p>What I tried so far is getting the value of the input via JavaScript, like so:</p>
  <pre><code>  var btnFilterList = document.getElementById(&quot;btnFilterList&quot;);
    var txtFilter = document.getElementById(&quot;txtFilter&quot;);
    console.log(txtFilter.getAttribute(&quot;value&quot;));
          
    btnFilterList.setAttribute(&quot;href&quot;, &quot;@{/clients/getClientByLastName/{lastName}(lastName=${&quot; + txtFilter.value + &quot;})}&quot;)
  </code></pre>
  <p>and also:</p>
  <pre><code>  var btnFilterList = document.getElementById(&quot;btnFilterList&quot;);
    var txtFilter = document.getElementById(&quot;txtFilter&quot;);
    console.log(txtFilter.getAttribute(&quot;value&quot;));
          
    btnFilterList.setAttribute(&quot;th:href&quot;, &quot;@{/clients/getClientByLastName/{lastName}(lastName=${&quot; + txtFilter.value + &quot;})}&quot;)
  </code></pre>
  <p>But none seemed to work.</p>