Sum up values of multiple selectboxes

Question

I'm trying to sum up some values from multiple selectboxes. The problem is that the options contains both text and numbers. I only need the numbers and sum these up. There's no other way to do this. So what i tried was to strip text from the string and then update the amount every time the selectbox changes. Now the result is always wrong.

My other issue is that sometimes there is a minus symbol in front of the number(s). Is there any way to extract that from the total? There's an example in the third selectbox in the Fiddle.

Can anybody help with this? I've created a Fiddle here

HTML

<form method="post" id="product_configure_form" action="cart/add/14161745">
    <div class="product-info-options tui">
        <input type="hidden" value="" id="product_configure_bundle_id" name="bundle_id">
        <div class="product-configure">
            <div class="product-configure-custom">
                <div class="product-configure-custom-option">
                    <label for="product_configure_custom_604623">Stoffering: <em>*</em>

                    </label>
                    <select id="product_configure_custom_604623" name="custom[604623]">
                        <option selected="selected" disabled="disabled" value="">Maak een keuze...</option>
                        <option value="5217777">Camira 24/7 *snellever - 2 weken</option>
                        <option value="5217779">Staccato *snellever - 2 weken (+€27,00)</option>
                        <option value="5217781">Leer 1 Trento *snellever - 2 weken (+€85,00)</option>
                        <option value="5217783">Leer 2 Litano (+€172,00)</option>
                    </select>
                    <div class="product-configure-clear"></div>
                </div>
                <div class="product-configure-custom-option">
                    <label for="product_configure_custom_603895">Armlegger frame kleur: <em>*</em>

                    </label>
                    <select id="product_configure_custom_603895" name="custom[603895]">
                        <option selected="selected" disabled="disabled" value="">Maak een keuze...</option>
                        <option value="5217785">zwart gecoat</option>
                        <option value="5217787">aluminium gecoat (+€11,00)</option>
                        <option value="5217789">aluminium gepolijst (+€11,00)</option>
                        <option value="5217791">verchroomd (+€53,00)</option>
                    </select>
                    <div class="product-configure-clear"></div>
                </div>
etc............

JQUERY

        function update_amounts() {
          var sum = 0.0;
          $('#product_configure_form .product-configure-custom-option select').each(function () {
            var price = $(this).find('option:selected').text();
            var priceClean = price.replace(/[^0-9]/g, '');
            priceClean = parseFloat(priceClean) || 0;
            sum += priceClean;
          });
          $('#amount').text('€' + sum.toFixed(2));
        }


        $( "#product_configure_form .product-configure-custom-option select" ).change(function() {
          update_amounts();
        });

Put the number in the value attribute, and use that, not the text. — Barmar
– Barmar, Commented Nov 3, 2014 at 23:01
Can you elaborate on why "There's no other way to do this"? What are the restrictions? — Fiddles
– Fiddles, Commented Nov 3, 2014 at 23:40

jcera · Accepted Answer · 2014-11-03 23:14:35Z

3

If you do not want to put those numbers in the value, then you can use HTML data attributes.
So you can code your select boxes this way:

<select id="mySelectBox">
    <!--selected as an example-->
    <option value="123" data-price="27000" selected>Some Stuff ($27,000)</option>
    <option value="124" data-price="12000">Magic Sword ($12,000)</option>
</select>

and then using jQuery, you can extract the data attribute using jQuery.data():

//27,000
var price = $('select#mySelectBox').find(':selected').data('price');

answered Nov 3, 2014 at 23:14

jcera

3452 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Meules Over a year ago

Thx this would my normal way to go but I'm not able to change anything in the code.

Fiddles · Accepted Answer · 2014-11-04 00:06:06Z

2

Assuming you can't change the HTML structure at all, and that the last parentheses will contain the price if it has one:

function update_amounts() {
    var sum = 0.0;
    $('#product_configure_form .product-configure-custom-option select').each(function () {
        var optionText = $(this).find('option:selected').text();
        var matches = optionText.match(/\(([^)]+)\)/g) || [];
        if (matches.length > 0) {
            var priceText = matches[matches.length - 1];
            if (priceText.indexOf("€") > -1) {
                var priceClean = priceText.replace(/[^0-9\+\-\.\,]/g, '');
                var priceValue = parseFloat(priceClean) || 0;
                sum += priceValue;
            }
        }
    });
    $('#amount').text('€' + sum.toFixed(2));
}

$( "#product_configure_form").on("change", ".product-configure-custom-option select", update_amounts);

You might need to adjust the "priceClean" regex depending on your decimal point character.

answered Nov 4, 2014 at 0:06

Fiddles

2,9161 gold badge35 silver badges36 bronze badges

1 Comment

Meules Over a year ago

That's exactly what I meant. I'm not able to change the html... thx for this solution!!

Collectives™ on Stack Overflow

Sum up values of multiple selectboxes

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related