Skip to content

Make option HTML tag set something in the url – Django

I am trying to do something, but I don’t know if it’s acutally possible…

Basically I’m trying to pass information in the url… (something like this)

<form class="header__search" method="GET" action="">
    <input name="q" placeholder="Browse Topics" />
</form>

but instead of using a text input I would like the user to simply click an option in a dropdown menu… (like this)

<form action="" method="GET">
      <div class="units-div">
        <label for="units">Units:</label>
        <select name="units" id="units-selection">
          <option value="metric">Metric</option>
          <option value="imperial">Imperial</option>
        </select>
      </div>
      <div class="language-div">
        <label for="language">Language:</label>
        <select name="language" id="language-selection">
          <option value="english">English</option>
          <option value="italian">Italian</option>
          </option>
        </select>
      </div>
</form>

Is it possible to do so? Hopefully I’ve explained myself decently lol

Advertisement

Answer

You can do this with javascript and onchange attribute:

  <div class="units-div">
    <label for="units">Units:</label>
    <select name="units" id="units-selection" onchange="window.location.href='?units='+units-selection.value+'&language='+language-selection.value">
      <option value="metric">Metric</option>
      <option value="imperial">Imperial</option>
    </select>
  </div>
  <div class="language-div">
    <label for="language">Language:</label>
    <select name="language" id="language-selection" onchange="window.location.href='?units='+units-selection.value+'&language='+language-selection.value">
      <option value="english">English</option>
      <option value="italian">Italian</option>
      </option>
    </select>
  </div>