Change an href tag on a button based on which option is selected

May 15, 2023

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>

>Solution :

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>