Which option determines the href tag on a button in HTML?

frankensteiner
May 15, 2023
191 views
1 vote
2 Answers

I’m trying to update the link on the button at the end of the page based on which option is selected in the dropdown, but it’s not updating.

I tried making a function in JavaScript to change the link, then call on that function whenever an option is clicked. But the link remains the same.

I’m using bootstrap if that matters.

function changeLink(unit_link) {
      document.getElementById("forecast_button").href = unit_link;
      alert(getElementById("forecast_button").href)
    }

<div class="container">
  <h1>Tactical Volume Forecaster</h1>
  <p>Which unit are you forecasting for?</p>
  <select class="form-select" aria-label="Default select example" id="unit">
    <option selected>...</option>
    <option value="Sales" onclick="changeLink('/volume_forecaster/result/Sales');">Sales</option>
    <option value="Client_Service" onclick="changeLink('/volume_forecaster/result/Client_Service');">Client Service</option>
    <option value="Agency" onclick="changeLink('/volume_forecaster/result/Agency');">Agency</option>
    <option value="Experts" onclick="changeLink('/volume_forecaster/result/Experts');">Experts</option>
  </select><br/><br/>

  <a href="/volume_forecaster/" class="btn btn-info" role="button" id="forecast_button">Get Forecast</a>

</div>

Tags: html javascript

Answers

You should listen for the onchange event on the <select> tag.

  function changeLink() {
    var selectedUnit = document.getElementById("unit").value;
    var unitLink = "/volume_forecaster/result/" + selectedUnit;
    document.getElementById("forecast_button").href = unitLink;
  }

<div class="container">
  <h1>Tactical Volume Forecaster</h1>
  <p>Which unit are you forecasting for?</p>
  <select class="form-select" aria-label="Default select example" id="unit" onchange="changeLink()">
    <option selected>...</option>
    <option value="Sales">Sales</option>
    <option value="Client_Service">Client Service</option>
    <option value="Agency">Agency</option>
    <option value="Experts">Experts</option>
  </select><br/><br/>

  <a href="/volume_forecaster/" class="btn btn-info" role="button" id="forecast_button">Get Forecast</a>

</div>

For selects, your best option is detecting change not click.

Here I have the href as a data attribute on each option and just use an event handler to detect the change.

let unit = document.querySelector("#unit");
let btn = document.querySelector("#forecast_button");
unit.addEventListener("change",() => {
    btn.href = unit.querySelector("option:checked").dataset.href;
    console.log(btn.href)
});

<div class="container">
  <h1>Tactical Volume Forecaster</h1>
  <p>Which unit are you forecasting for?</p>
  <select class="form-select" aria-label="Default select example" id="unit">
    <option selected>...</option>
    <option value="Sales" data-href='/volume_forecaster/result/Sales'>Sales</option>
    <option value="Client_Service" data-href='/volume_forecaster/result/Client_Service'>Client Service</option>
    <option value="Agency" data-href='/volume_forecaster/result/Agency'>Agency</option>
    <option value="Experts" data-href='/volume_forecaster/result/Experts'>Experts</option>
  </select><br/><br/>

  <a href="/volume_forecaster/" class="btn btn-info" role="button" id="forecast_button">Get Forecast</a>

</div>

Please signup or login to give your own answer.

Click here to cancel reply.