Question

I’m creating a custom computer building but I’m struggling to update the total price.

The user selects what processor they want, and it uses data-price to add onto the price.

Here is my HTML

<div class="process_intel_options" style="display:block">
            <label class="option">
                <input type="radio" name="processor_options" value="i7950" data-price="155"  id="intel_options_0" checked="checked" />
                Intel Core i7 950 3.06Ghz
                </label>
            <br />
            <label class="option">
                <input type="radio" name="processor_options" value="i7960" data-price="250" id="intel_options_1" />
                Intel Core i7 960 3.20Ghz
                </label>
        </div>

        <div class="process_amd_options" style="display:none">
            <label class="option">
                <input type="radio" name="processor_options" value="i7950" data-price="150" id="amd_options_0" />
                AMD Core i7 950 3.06Ghz
                </label>
            <br />
            <label class="option">
                <input type="radio" name="processor_options" value="i7960" data-price="352" id="amd_options_1" />
                AMD Core i7 960 3.20Ghz
                </label>
        </div>

And my JavaScript, I’m very new to JavaScript so excuse any schoolboy errors!

var base_price = 300;
$("#final_price").html(base_price);

$("*").click(function() {
    // Update price

    // Select all checked
    $(":checkbox").each(function(index) {
        // Select all checked and with a price
        $(this).data("price").each(function(index) {
            // Add the prices
            base_price += $(this).data("price");
        });
    });
    $("#final_price").html(base_price);

});

The reason it loops is because the user can choose a graphics card, motherboard etc from a radio (or checkbox) list.

Here is my exmple live : http://genyx.co.uk/CCB/

Please note only the processors currently have data-price on them.

Answer 1

There are several logic problems with your example, leading to an endless price increase when you change items, an incorrect cost for the selected options on page load and also issues when more than one block of options is used.

First of all, add a class to each input that needs to be included in the pricing total, I used calculation-item in my example. The removes the need for the * selector which is overkill for what you need and also slow.

var base_price = 300;
CalculatePrice();

$(".calculation-item").click(function() {
    CalculatePrice();
});


function CalculatePrice() {
    var base_cost = base_price;
    $(".calculation-item:checked").each(function(index) {
        base_cost += $(this).data("price");
    });

    $("#final_price").html(base_cost);   
}

Working fiddle