Cost Calculator using JavaScript - Advanced

Question

So I have a HTML form which has two dropdown menus and a button. One dropdown menu has 'package type' which consists of 'Gold', 'Silver' and 'Bronze'. The second dropdown menu has 'months' with 12 options (for up to 12 months) and then a calculate button.

Now, this is the bit I hope I can explain well...

If you select 'Silver', and '1 month', it will cost £150.00.

If you select 'Silver', and '2 months', it will cost £225.00.

If you select 'Silver', and '3 months', it will cost £300.00.

And so on (up to 12 months). So the logic for the above is £150.00 for the first month, and then £75 for additional months.

But if you decide you want to have a 'Gold' package, it will be as follows:

If you select 'Gold', and '1 month', it will cost £199.00.

If you select 'Gold', and '2 months', it will cost £298.50.

If you select 'Gold', and '3 months', it will cost £398.00.

And so on (up to 12 months). So the logic for the above is £199.99 for the first month, and then £99.50 for additional months.

And similar for 'Bronze' too, except 1 month is £75.00, 2 months is £112.50 (logic is £75.00 for first month, and £37.50 for additional months).

I hope this makes sense? Below is the HTML for the form, which I know does not work, but this is just to try and explain...

What I currently have (that works), is the following, but it doesn't do what I need it to do, this just has the cost hardcoded in, so regardless of the package type, the cost will be the same (except for the initial cost being different for each package):

And the JavaScript as follows:

function calculatePrice(costcalculator){
  var elt = document.getElementById("packageType");
  var package = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("months");
  var months = elt.options[elt.selectedIndex].value;

  package = parseFloat(package);
  months = parseFloat(months);

  var total = package+months; 

  document.getElementById("TotalPrice").value=total;
}

So I thought I was nearly there with the working code above, but the more I get into it, the more I realise it's way off.

It just needs a way that when the user selects the package type in the first dropdown menu, then the second dropdown menu containing the months will (behind the scenes) have populated the new costs immediately before the user selects number of months, and then if the user then decides to select a different package to the last one, the second dropdown menu will refresh again but with the different costs in the background.

HaukurHaf · Accepted Answer

Here's a simple solution using a simple data structure as per the comment from 04FS. The data structure has the package name as the key, for easy lookup. It has the base price (for the first month) and then the price for additional months, so the total price can be easily calculated.

HTML markup:

Javascript code:

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.toFixed(2);
}

Working sample:

https://jsfiddle.net/td3j5frn/

Cost Calculator using JavaScript - Advanced

Answers (2)

Related Questions