Calculate Total w JavaScript

Use JavaScript to target an input field and calculate total based on unit cost.

by Sean Davis

HTML

<div class="calculate-total">
  <p>
    Confirm number of spaces you wish to book here:
    <input class="num-spaces" type="number" placeholder="1"  min="1" value="1">
  </p>
  <p>
    Total Amount
    £<span class="total" data-unit-cost="10">0</span>
  </p>
</div>

JavaScript

$('.calculate-total input').on('keyup', calculateBookingPrice);

function calculateBookingPrice() {
	var unitCost = parseFloat($('.calculate-total .total').data('unit-cost')),
  		numSpaces = parseInt($('.calculate-total .num-spaces').val()),
      total = (numSpaces * unitCost).toFixed(2);
      
  if (isNaN(total)) {
    total = 0;
  }
      
  $('.calculate-total span.total').text(total);
}

$(document).ready(calculateBookingPrice)