Question

So basically I need to add to this form – http://jsfiddle.net/tSsvb/ automatically price calculation. For example the parameters are these – (The 3 bikes are only test, there may be like 100 or even 200).
So basically –

Bike 1 -
Price for 1 - 2 days in Season 1 - 5$ per day.
Price for 1 - 2 days in Season 2 - 10$ per day.
Price for 1 - 2 days in Season 3 - 20$ per day.
Price for 3 - 7 days in Season 1 - 4$ per day.
Price for 3 - 7 days in Season 2 - 7$ per day.
Price for 3 - 7 days in Season 3 - 15$ per day.
Price for 8+ days in Season 1 - 3$ per day.
Price for 8+ days in Season 2 - 5$ per day.
Price for 8+ days in Season 3 - 12$ per day.

Bike 2 -
Price for 1 - 2 days in Season 1 - 10$ per day.
Price for 1 - 2 days in Season 2 - 20$ per day.
Price for 1 - 2 days in Season 3 - 30$ per day.
Price for 3 - 7 days in Season 1 - 7$ per day.
Price for 3 - 7 days in Season 2 - 15$ per day.
Price for 3 - 7 days in Season 3 - 25$ per day.
Price for 8+ days in Season 1 - 5$ per day.
Price for 8+ days in Season 2 - 12$ per day.
Price for 8+ days in Season 3 - 22$ per day.

Bike 3 -
Price for 1 - 2 days in Season 1 - 3$ per day.
Price for 1 - 2 days in Season 2 - 5$ per day.
Price for 1 - 2 days in Season 3 - 10$ per day.
Price for 3 - 7 days in Season 1 - 2$ per day.
Price for 3 - 7 days in Season 2 - 3$ per day.
Price for 3 - 7 days in Season 3 - 7$ per day.
Price for 8+ days in Season 1 - 1$ per day.
Price for 8+ days in Season 2 - 2$ per day.
Price for 8+ days in Season 3 - 5$ per day.

And the season dates are –

Season 1: 1 January to 10 June and 21 September to 31 December
Season 2: 11 June to 30 June and 1 September to 20 September
Season 3: 1 July to 31 August

So let’s do a test calculation.
If I choose a date from 1st July to 25 September the calculation will be for bike 3 as following –

62*5 + 20*2 + 5*1 = 310 + 40 + 5 = 355$

And this sum should automatically add in text field “Price”. If I change the dates, the price should automatically change too. Is there any easy way to create something like that? If you have any questions – ask, I will be happy to answer to them, so you can help me solve this question more easily.

Answer 1

Live example: http://jsfiddle.net/tSsvb/1/

I started with 2 variables which represent

• an array of the various seasons
• an object which represents the pricing matrix

---

var seasonLookup = [
    {startDay: 1, startMonth:1, endDay: 10, endMonth: 6, season:1},
    {startDay: 21, startMonth:9, endDay: 31, endMonth: 12, season:1},
    {startDay: 11, startMonth:6, endDay: 30, endMonth: 6, season:2},
    {startDay: 1, startMonth:9, endDay: 20, endMonth: 9, season:2},
    {startDay: 1, startMonth:7, endDay: 31, endMonth: 8, season:3},    
    ];

var priceMatrix = {
    bike3: {
        1: { t1: 2, t2: 2, t3: 1},
        2: { t1: 5, t2: 3, t3: 2},
        3: { t1: 10, t2: 3, t3: 5}
    }        
};

---

The first is pretty straightforward. The second I have only moddled up bike3 as it’s the one youve used in your example. 1,2 & 3 represent the season, t1 – t3 represent the tier’s of payment with t1 hardcoded as 1-2 days, t2 as 3-7 and t3 as 8+.

Then I have created 2 functions. One gets the season for a specified date:

function getSeason(date){
    var day = date.getDate();
    var month = date.getMonth()+1;
    var year = date.getFullYear();
    for(var i=0;i<seasonLookup.length;i++){
        var s = seasonLookup[i];
        var startDate = new Date(year, s.startMonth-1,s.startDay);
        var endDate = new Date(year, s.endMonth-1,s.endDay);
        if(date >= startDate && date <= endDate)
            return s.season;
    }
    return null;
}

The other gets the total price for a specified bike in a specified season for a specified number of days:

function getPrice(bike, season, days){
  var tier = "";
  if(days <=2)
    tier = "t1";
  else if(days <=7)    
      tier = "t2";
   else
       tier = "t3"
   return priceMatrix[bike][season][tier] * days;
}

---

Next step is a method to do the actual calculation based on a start date, end date and bike:

function calculatePrice(startDate, endDate, bike)
{
   var currentSeason = getSeason(startDate);
   var totalPrice = 0;
   var daysInSeason = 0;
   var currentDate = startDate;
   while(currentDate<=endDate){
       var season = getSeason(currentDate);
       if(season != currentSeason){
              totalPrice += getPrice(bike,currentSeason,daysInSeason);
              currentSeason = season;
              daysInSeason = 0;
       }
       daysInSeason++;
       currentDate.setDate(currentDate.getDate()+1);        
   }
    totalPrice += getPrice(bike,currentSeason,daysInSeason);
    return totalPrice;
}

And the final part is to hook it up so that it recalculates on any change of the dropdowns. jQuery is your friend here. I hadded a class recalc to all elements that should cause the recalculation, id’s to everything to make them easier to reference, and hooked into the change event to build the parameters and call the method:

$('.recalc').change(function(){
    var startDate = new Date(parseInt($('#yd').val(),10),parseInt($('#md').val(),10)-1,parseInt($('#dd').val(),10) );
    var endDate = new Date(parseInt($('#yr').val(),10),parseInt($('#mr').val(),10)-1,parseInt($('#dr').val(),10));
    var bike = $('#bike').val();

    var price = calculatePrice(startDate,endDate,bike);
    $('#price').val(price);

});

Hope that helps, you may need to generate your pricing matricies from PHP, but thats an excercise for you 🙂