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

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 >
        <form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
            <div >
                <div >Search by State Name:</div>
                <div ><input id="filter" type="text" th:field="*{officialStateName}" /></div>
                <div >
                    <button >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!

CodePudding user response：

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 >
    <div >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 ><input id="filter" type="text" th:field="*{officialStateName}"  /></div>
    <div >
      <button >Search!</button>
    </div>
  </div>
</form>