How can I pass the value from drop down list as a link for button?

June 18, 2022

I am creating a web app (using thymeleaf, html, css, javascript) and I ran into a problem. Say I have a search bar and a button like this:

Now this represents the functionality of an app and currently it can only search records from a table by their name. But I want to add some other functions like "search by population", "search by capital" etc. I was planning on creating a drop-down list next to the search bar where these options will be included, and the user will select from that list how he wants to search for a record. I can’t see a way to do that. Currently this is a search bar code:

<h4 class="left">
        <form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
            <div class="row m-b">
                <div class="child">Search by State Name:</div>
                <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
                <div class="child box-3">
                    <button class="btn">Search!</button>
                </div>
            </div>
        </form>
    </h4>

So it is unclear for me how I do this because I need to specify the link for button based on what user will choose from the list. Any help is appreciated!

>Solution :

You can create a <select> element with options whose value indicate what the action of the form should be. Whenever its value changes, you can update the form’s action.

document.getElementById('search-by').addEventListener('change', function(e) {
  let searchBy = this.value;
  console.log(searchBy);
  this.form.action = `/events/${searchBy}`;
});

<form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
  <div class="row m-b">
    <div class="child">Search by
      <select id="search-by">
        <option value="showByState">State Name</option>
        <option value="showByPopulation">Population</option>
        <option value="showByCapital">Capital</option>
      </select>:</div>
    <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
    <div class="child box-3">
      <button class="btn">Search!</button>
    </div>
  </div>
</form>