Configure Cart Price Update

I want to create a product ordering page that has tons of options. Each option changes the price around a little bit, and I want the total price auto-update whenever any option cha

Solution 1:

Try binding a jQuery/javascript function that calculates the sum of all price input fields and prints it at the bottom to the dropdowns' onchange events like so. The HTML I'm giving you is just a mockup, feel free to change it and the jQuery references to it as you wish.

HTML:

<p>Computer base price: $<spanid="baseCost"></span></p><p>Select your upgrades:</p><formid="options"><selectname="processor"onchange="calculateTotals()"><optionvalue="Base_0">Base processor ($0)</option><optionvalue="Processor1_100">Processor 1 ($100)</option><optionvalue="Processor2_500">Processor 2 ($500)</option></select><selectname="hard-drive"onchange="calculateTotals()"><optionvalue="Base_0">Base hard-drive ($0)</option><optionvalue="7200rpm_250">7200rpm hard-drive ($250)</option></select></form><p>Upgrade total: $<spanid="upgradeCost">0</span></p><br><p>Final total: $<spanid="sumTotal"></span></p>​

Javascript:

$(document).ready(function(){
    var basePrice = 2000;
    $("#baseCost").text(basePrice);
    $("#sumTotal").text(basePrice);
});

functioncalculateTotals(){
    var basePrice = parseInt($("#baseCost").text(), 10);
    var upgradePrice = 0;
    $("#options select").each(function(){
        var optionVal = $(this).val();
        upgradePrice += parseInt(optionVal.substr(optionVal.indexOf("_") + 1, optionVal.length - 1), 10);
    });
    $("#upgradeCost").text(upgradePrice);
    $("#sumTotal").text(basePrice + upgradePrice);
}​

WORKING DEMO

As you can see, the option value attributes include both the option ID and its price, separated by an underscore. This allows the Javascript and your form handling code to get both the selected options and their prices.