Marilee Marilee - 3 months ago 18
jQuery Question

Javascript update price select onchange

I'm working on a simple car reservation system for a first year project, which is among others an introduction to javascript.

On page one the values the user entered are passed to page 2 with php, and my javascript below is working correctly to calculate the rental price.

My Problem

However, on page 2 the user can edit their booking, i.e. upgrading car type. Which should result in either a price increase or decrease depending on the

carGroup
selected by user.

My problem when im adding the
onchange
to the
select
element for
carGroup
the price is not changing and im getting no errors which is not making the situation any easier to debug.

The code below is pretty basic, I would greatly appreciate it, if someone could give it a scan and perhaps advise where I'm going wrong.

UI

enter image description here

Javascript

function calcPrice() {
var oneDay = 24 * 60 * 60 * 1000;
var firstDate = document.getElementById("firstDate").value;
var secondDate = document.getElementById("secondDate").value;
var date1 = firstDate.substring(0, 11);
var date2 = secondDate.substring(0, 11);
date1 = date1.replace(/\//g, ",");
date2 = date2.replace(/\//g, ",");

var firstDate = new Date(date1);
var secondDate = new Date(date2);

var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
//calculate rental price
var price;
var dayRate;
var carGroup = document.getElementById("group").value;

//change values to increase or decrease price
var a = 250;
var b = 500;
var c = 750;
var d = 1000;
if (carGroup == 'a') {
price = diffDays * a;
dayRate = a;
} else if (carGroup == 'b') {
price = diffDays * b;
dayRate = b;
} else if (carGroup == 'c') {
price = diffDays * c;
dayRate = c;
} else if (carGroup == 'd') {
price = diffDays * d;
dayRate = d;
}

document.getElementById("rentalInfo").innerHTML = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>';
}


Html

<select onChange="calcPrice()"name="carType" id="group">
<option selected value="<?php echo $carType ?>"><?php echo $carType?></option>
<option value="a">Group A (Hyundai I10)</option>
<option value="b">Group B (VW POLO)</option>
<option value="c">Group C (Corolla)</option>
<option value="d">Group D (Bakkie)</option>
</select>
</div><!--formGroup-->


JSFIDDLE

I created a JSFIDDLE here, the only problem with my JSFIDDLE Is that The
calcPrice()
function should run on
<body onload="calcPrice()">
which I suspect is not happening in JSFIDDLE

Answer

Hey Marilee that was me in the fiddle with you! lol! So this may need some tweaking but one way to do it is to use event listeners instead. By putting this in an onload, it will run the function when a user hits the page - rendering the default days and values and price.

The keyup event listener may not be exactly what you want in that the price will be updating LIVE as the user adjusts their dates and you may not want that (just google around or check the docs to see if there is a event more suited to your needs - another option would be to add a button that runs the function to update when the user is finished adjusting) and the change eventlistener will call the function anytime the dropdown select is changed.

window.onload = function() {
        document.querySelector("#firstDate").addEventListener("keyup", calcPrice);
        document.querySelector("#secondDate").addEventListener("keyup", calcPrice);
        document.querySelector("#group").addEventListener("change", calcPrice);

        function calcPrice() {
          var oneDay = 24 * 60 * 60 * 1000;
          var firstDate = document.getElementById("firstDate").value;
          var secondDate = document.getElementById("secondDate").value;
          var date1 = firstDate.substring(0, 11);
          var date2 = secondDate.substring(0, 11);
          date1 = date1.replace(/\//g, ",");
          date2 = date2.replace(/\//g, ",");

          firstDate = new Date(date1);
          secondDate = new Date(date2);

          var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
          //calculate rental price
          var price;
          var dayRate;
          var carGroup = document.getElementById("group").value;

          //change const values to increase or decrease price
          var a = 250;
          var b = 500;
          var c = 750;
          var d = 1000;
          if (carGroup == 'a') {
            price = diffDays * a;
            dayRate = a;
          } else if (carGroup == 'b') {
            price = diffDays * b;
            dayRate = b;
          } else if (carGroup == 'c') {
            price = diffDays * c;
            dayRate = c;
          } else if (carGroup == 'd') {
            price = diffDays * d;
            dayRate = d;
          }

          document.getElementById("rentalInfo").innerHTML = diffDays + ' Day Rental, At: ' + dayRate + ' Per Day. <span style="color:red; font-weight:bold"> Total Price: ' + price + '</span>';
        }



      calcPrice()
      }

Also, in your code you are redeclaring the firstDate and secondDate variables when you reset them. No need to redeclare them.

Another way to do it would be to leave your code as it is and only put the event listeners and the function call in the page load.

window.onload = function() {
        document.querySelector("#firstDate").addEventListener("keyup", calcPrice);
        document.querySelector("#secondDate").addEventListener("keyup", calcPrice);
        document.querySelector("#group").addEventListener("change", calcPrice);

calcPrice()
      }