Update price based on select options

Question

I have multiple select options in a form with prices attached to each with data-price. When any option changes or is selected i need to update the price based on all the selections. I have tried the following:

http://jsfiddle.net/325x2d8e/

html:

<h3>Size</h3>

<select class="form-control calculate" id="size" name="size">
    <option data-price="5.00" value="Small">Small</option>
    <option data-price="10.00" value="Medium">Medium</option>
    <option data-price="15.00" value="Large">Large</option>
</select>
<br />

<h3>Packing</h3>

<select class="form-control calculate" id="packaging" name="packaging">
    <option data-price="0" value="Standard">Standard</option>
    <option data-price="20.00" value="Shrink">Upgraded</option>
</select>
<br />  

<h4>PRICE</h4>

<span id="item-price">12.99</span>

jquery:

var basePrice = 12.99;

$(".calculate").change(function() {
    newPrice = basePrice;
    $(".calculate option:selected").each(function() {
        newPrice += $(this).data('price')
    });
    $("#item-price").html(newPrice);
});

I am using jQuery 1.11.2 which concatenates each option like a string outputting:

12.9910.0020.00

but I need to add them together as a number and give me one value.

If i use jQuery 1.7.2 it gives me the correct value:

42.99 (12.99 + 10.00 + 20.00)

How can I do this? I have to stick with jQuery 1.11 as some of my other scripts relay on this version or higher

Answer 1

You are adding a string (which should be a number but isn't) to a number, typecast the string to a number then used .toFixed(2) to make it currency.

(Demo)

var basePrice = 12.99;
$(".calculate").change(function () {
    newPrice = basePrice;
    $(".calculate option:selected").each(function () {
        newPrice += Number($(this).data('price'));
    });
    $("#item-price").html(newPrice.toFixed(2));
});

The same script in vanilla javascript, no jQuery required

(Demo)

var basePrice = 12.99;
var itemPrice = document.getElementById('item-price');
(function () {
    "use strict";
    var selects = document.getElementsByClassName('calculate'), select;
    for (var i = 0; select = selects[i]; i++) {
        select.addEventListener('change',function (){
            var newPrice = basePrice;
            var selectedItems = document.querySelectorAll('.calculate option:checked'), selected;
            for(var x = 0; selected = selectedItems[x]; x++) {
                newPrice += Number(selected.getAttribute('data-price'));
            }
            itemPrice.innerHTML = newPrice.toFixed(2);
        },false);
    }
})();

Answer 2

.data() is supposed to intelligently interpret values as numbers; for some reason, it isn't doing that with your decimal numbers. (Your jsFiddle confirms that it works fine in jQuery 1.10.1 and 2.1.3, strangely enough.) You can force it to do so by using parseFloat() to convert the strings to numbers, but then you have to compensate for the usual floating-point arithmetic errors by using toFixed(2) at the end.

var basePrice = 12.99;
$(".calculate").change(function () {
    newPrice = basePrice;
    $(".calculate option:selected").each(function () {
        newPrice += parseFloat($(this).data('price'));
    });
    $("#item-price").html(newPrice.toFixed(2));
});

http://jsfiddle.net/gfch55bk/

---

A simpler solution might be to use integer numbers instead of decimals. However, you'll still need to round the sum using .toFixed(2) at the end:

<h3>Size</h3>
<select class="form-control calculate" id="size" name="size">
    <option data-price="5" value="Small">Small</option>
    <option data-price="10" value="Medium">Medium</option>
    <option data-price="15" value="Large">Large</option>
</select>
<br />
<h3>Packing</h3>
<select class="form-control calculate" id="packaging" name="packaging">
    <option data-price="0" value="Standard">Standard</option>
    <option data-price="20" value="Shrink">Upgraded</option>
</select>
<br />
<h4>PRICE</h4>
<span id="item-price">12.99</span>

JS:

var basePrice = 12.99;
$(".calculate").change(function() {
    newPrice = basePrice;
    $(".calculate option:selected").each(function() {
        newPrice += $(this).data('price')
    });
    $("#item-price").html(newPrice.toFixed(2));
});

http://jsfiddle.net/8tb465g6/