Dynamic Dropdown menu - change button URL depending on option selected with JavaScript

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;
}

score 0 · Answer 1 · answered Mar 05 '19 at 10:51

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>

score 0 · Accepted Answer · answered Mar 05 '19 at 11:02

0

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()

answered Mar 05 '19 at 11:02

Paula

52
4

That's great thank you. How challenging would it be to have the link go to a new page (like your example) but then on that page, a textfield from a form is pre-populated with the package chosen? I imagine that's a completely different conversation but just curious if doable. – mikedevp Mar 05 '19 at 11:50
Of cause it's doable. You can get data provided in the URL with javascript: [StackOverflow: how to get the value from the get parameters](https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters) and set the innerHTML of your destination dom Element like you did befor: `document.getElementById('price').innerHTML = price;` – Paula Mar 05 '19 at 12:13

Dynamic Dropdown menu - change button URL depending on option selected with JavaScript

2 Answers2