动态下拉菜单-根据JavaScript选择的选项更改按钮URL

Question

So I have a 'cost calculator' which is very similar (in terms of the code) to this example on JSFiddle .

But I would like to take this one step further. So currently, when you select an option from each of the dropdown menus, the cost is shown straight away which is great.

I would like to now add a button (or link) beneath that, so that depending on the options selected, not only does the cost update, but the button/link updates automatically depending on what is selected so that the user can then go to a new page if this makes sense?

And if the user doesn't click the button/link to go to the new page, but then decides to change an option on the dropdown menu, the link will update again automatically.

Any help would be much appreciated.

<form name="costcalculator">
  <div class="package-type">
    <select name="packageType" id="packageType" onchange="setMonths(this.value)">
      <option value="gold">Gold</option>
      <option value="silver">Silver</option>
      <option value="bronze">Bronze</option>
    </select>
  </div>

  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
      <option value="4">4 months</option>
      <option value="5">5 months</option>
      <option value="6">6 months</option>
      <option value="7">7 months</option>
      <option value="8">8 months</option>
      <option value="9">9 months</option>
      <option value="10">10 months</option>
      <option value="11">11 months</option>
      <option value="12">12 months</option>
    </select>
  </div>

  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

And the JavaScript:

var costs = {
    'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12},
  'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12},
  'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2}
};

function setMonths(package)
{
    var maxMonths = costs[package].maxMonths;
  document.getElementById("months").innerHTML = ''; // Clear all options
  for (var i = 1; i<=maxMonths; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i +  (i > 1 ? ' months' : ' month');
    document.getElementById('months').appendChild(opt);
    }
}

function calculatePrice()
{
    var package = document.getElementById('packageType').value;
  var months = document.getElementById('months').value;
  var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price;
}

Answer 1

On calculate you can create an a element and give it any custom url using setAttribute method. On the next click you can provide a check if the a tag already exists and if it does first remove the old a tag then create a new one and update it with new text and link

 var costs = { 'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12}, 'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12}, 'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2} }; function setMonths(package) { var maxMonths = costs[package].maxMonths; document.getElementById("months").innerHTML = ''; // Clear all options for (var i = 1; i<=maxMonths; i++){ var opt = document.createElement('option'); opt.value = i; opt.innerHTML = i + (i > 1 ? ' months' : ' month'); document.getElementById('months').appendChild(opt); } } function calculatePrice() { var package = document.getElementById('packageType').value; var months = document.getElementById('months').value; var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1)); document.getElementById('price').innerHTML = price; if(document.querySelector('#link')) { document.querySelector('#link').parentNode.removeChild(document.querySelector('#link').parentNode.querySelector('#link')) } var a=document.createElement('a'); a.innerHTML=package a.setAttribute('href','/'+package); a.setAttribute('id','link') document.querySelector('#f').appendChild(a) } 

 <form name="costcalculator" id="f"> <div class="package-type"> <select name="packageType" id="packageType" onchange="setMonths(this.value)"> <option value="gold">Gold</option> <option value="silver">Silver</option> <option value="bronze">Bronze</option> </select> </div> <div class="months"> <select name="months" id="months"> <option value="1">1 month</option> <option value="2">2 months</option> <option value="3">3 months</option> <option value="4">4 months</option> <option value="5">5 months</option> <option value="6">6 months</option> <option value="7">7 months</option> <option value="8">8 months</option> <option value="9">9 months</option> <option value="10">10 months</option> <option value="11">11 months</option> <option value="12">12 months</option> </select> </div> <button type="button" onclick="calculatePrice()">Calculate</button> <div id="price"></div> </form> 

Answer 2

Add a button, which triggers a function to generate a link to your next page.

Html: <button type="button" onclick="goToSite()">go to Site</button>

Javascript

function goToSite()
{
    var package = document.getElementById('packageType').value;
    var months = document.getElementById('months').value;
    var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));

    window.open('https://your.site.com/' + package + '/' + months + '/' + price, '_self');
}

You can read more about opening a page via Javascript here: w3schools Explanation window.open()