sum multiple values from inputs and selects in form

Question

i need to sum the values from multiple SELECTS and INPUTS, this is what i have so far:

HTML

<label>Item#1</label>
<select name="price[]" id="sel_1">
    <option value="">Options</option>
    <option value="4.00">Small</option>
    <option value="8.00">Medium</option>
</select>
<br>
<label>Item#2</label>
<select name="price[]">
    <option value="">Options</option>
    <option value="4.00">Small</option>
    <option value="8.00">Medium</option>
</select>
<br>
<label>Item#3</label>
<select name="price[]">
    <option value="">Options</option>
    <option value="4.00">Small</option>
    <option value="8.00">Medium</option>
</select>
<br>
<label>Item#4</label>
<input type="checkbox" value="1.00" id="price[3]" name="price[]">
<br>
<label>Item#5</label>
<input type="checkbox" value="2.00" id="price[3]" name="price[]">
<br>
<label>Item#6</label>
<input type="checkbox" value="3.00" id="price[3]" name="price[]">
<br> <span id="usertotal"> </span>

JQUERY

$('input:checkbox').change(function () {
    var tot = 0;
    $('input:checkbox:checked').each(function () {
        tot += Number($(this).val());
    });
    tot += Number($('#sel_1').val());
    $('#usertotal').html(tot)
});

$('#sel_1').change(function () {
    $('input:checkbox').trigger('change');
});

As you can notice it only sum the value from first select i need it too sum from all the selects.

DEMO: http://jsfiddle.net/B9ufP/

4 revs, 3 users 71% · Accepted Answer · 2013-08-28 05:01:43Z

3

Try this:
(I simplified a bit your code)

(function ($) {
    var $total = $('#usertotal');
    $('input,select:selected').on('change', function () {
        var tot = 0;
        $(':checked, select').each(function () {
            tot += ~~this.value;
        });
        $total.html(tot)
    });
}(jQuery))

Demo here

edited Aug 28, 2013 at 5:01

community wiki

4 revs, 3 users 71%
Sergio

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

6 Comments

arb Over a year ago

You shouldn't use the Number constructor. Either use parseInt(this.value,10) or ~~this.value. You also should cache $('#usertotal') outside of the change event hander so you aren't running that selector over and over. jsfiddle.net/zFCvV/2 something like that.

Sergio Over a year ago

@Zero21xxx, good point. I have to go sleep now, if you want please edit. Its a CW now. Thanks

Ered Over a year ago

thanks for ur fast answer... it's working ...quick question how can i make it get a attr instead of the value? var per_op = $(this).attr("ref"); tot += Number(per_op);

plalx Over a year ago

@Sergio, parseInt would be wrong since I assume he could have non-zero decimals.

Sergio Over a year ago

@Ered, I fixed it now. There was a :selected missing inside the each loop. So it was counting double, both from the select value and the option value.

|

plalx · Accepted Answer · 2013-08-27 21:58:49Z

3

If you want to be fancy, you can also use Array.prototype.reduce to sum up the values.

Note that if you have decimals, use parseFloat.

var total = [].reduce.call($('select, :checkbox:checked'), function (pv, cv) {
    return parseFloat(pv.value) + parseFloat(cv.value);
});

answered Aug 27, 2013 at 21:58

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Collectives™ on Stack Overflow

sum multiple values from inputs and selects in form

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related