Question 168845 in Html Question posted in
Some basic documentation can be found here.

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

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:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search