How to get a Tag value in a .heex file and assign to a variable using Phoenix and Elixir

Question

I have the following snippet code:

 <div class="container mx-auto p-4">
    <div class="mb-4">

      <!-- Limite de banners -->
      <label for="limit" class="text-gray-700 ml-4">Limite de banners</label>
      <select id="limit" name="limit" class="ml-2 p-2 border rounded appearance-none pr-8">
        <option value="5" selected>5</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>
      
      <!-- Botão de busca -->
      <button id="search" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Buscar
      </button>
    </div>
  </div>

I want to assign the option tag value to my var called @limit and pass it into the url path when I click on the button with id=search.

I don't have any idea how to do this. I found almost nothing on the internet about my problem. I'm not using LiveView on my Phoenix project.

Answer 1

Some options are:

1. Wrap your code in a <form> tag without the action attribute but with method GET and make the button a submit button.
2. Put some javascript in a <script> tag to handle a value change on the radios, deconstruct the current url and add/update the limit param, reload the page with the updated url.

If all you want is to update/reload the page with a new limit query param, I would suggest to try #1 first as it is the most simple solution.