jQuery Fetching data and making sum

Question

What i'm trying to do is taking the price of every input checked, making a sum out of it.

Here's my code

    function totalSum(e) {
    e.preventDefault();
    var unit = $("input:checked").parent("dt").siblings("dd").find("span"); 
    total = 0;
    $.each(unit, function(index, obj){
        total += parseInt($(obj).text(), 10);
    });
    $("#totalPrice").html('<span class="count">€ ' + total + '</span> â‚¬');
}

Every unit is found inside its span. Total is set to 0. I try to call a parseInt on each checked object, then add the total inside a span. In HTML, price is stated like that:

    <dd><span class="costo">€199</span></dd>

So as you see there is the Euro mark. I am afraid it could not be parsed, is this it? Because nothing change! How should I write it? Thanks in advance

Ok I feel so ashamed but I cannot get it to work. I decided to put the code at its minimum, so I tried that way

    <body>
    <div class="bla"><span class="count">1</span></div>
    <div class="bla"><span class="count">1</span></div>
    <div class="bla"><span class="count">1</span></div>

    <div id="total"></div>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js" /></script> 
    <script>
    $(document).ready(function(){


    function sum() {
        var prices = $("div.bla").find(".count");
        total= 0;
        $.each(prices, function(index, obj){
    total += parseFloat($(obj).text());
});

$("#total").html('<span class="count">'+total +'</span> €');
    };

});

This should work, yet nothing appear. Could someone be so kind to tell me what's going wrong?!

Check for the sign and remove it from the string before parsing. — Lee Meador, Feb 05 '13 at 18:44
http://stackoverflow.com/questions/559112/how-to-convert-a-currency-string-to-a-double-with-jquery-or-javascript — Dharman, Feb 05 '13 at 18:44

Denys Séguret · Answer 1 · 2013-02-05T18:50:27.357

1

You can simply remove the unit from the text :

var text = $(obj).text().replace(/[€\$]/,''); // add other units if needed
total += parseInt(text, 10); // are you sure you don't prefer parseFloat ?

Or, if you want to only keep digits and + and -, do

var text = $(obj).text().replace(/[^\d\-\+]/g, '');

edited Feb 05 '13 at 18:50

answered Feb 05 '13 at 18:44

Denys Séguret

372,613
87
782
758

this seems a very reasonable solution, but nothing appear in the field it should. Here's the html of my solution, if it might help
It's quite strange, I don't see what I'm doing wrong – John Funk Feb 05 '13 at 19:14
Put a console.log(unit) to check your span elements are correctly found (it depends on your exact html tree). If necessary make a fiddle on http://jsbin.com so that we can check it. – Denys Séguret Feb 05 '13 at 19:20
the tree should work, I already used that configuration with "children()" instead of "find()" and it worked – John Funk Feb 05 '13 at 19:23
I tried all the solution in the page and this one: var text = Number($(obj).text().replace(/[€\$]/,'')); total += parseInt(text, 10); But nothing appear; in the span#totalPrice – John Funk Feb 05 '13 at 19:27

score 1 · Answer 2 · answered Feb 05 '13 at 18:45

1

You can just replace any non-numeric characters:

total += parseInt($(obj).text().replace(/[^\d.-]/, ''), 10);

Also, you can do unit.each() instead of $.each(unit, but that has no effect on what you're trying to do.

answered Feb 05 '13 at 18:45

Explosion Pills

188,624
52
326
405

This seems a very good solution too, thanks for the refactor suggestion. – John Funk Feb 05 '13 at 19:18

score 0 · Answer 3 · answered Feb 05 '13 at 18:45

0

Change your parseInt to skip the first character.

total += parseInt($(obj).text().substring(1),10);

answered Feb 05 '13 at 18:45

Manuel Quinones

4,196
1
19
19

score 0 · Answer 4 · answered Feb 07 '13 at 01:19

After a couple of days trying and reading the best way to do it, I believe this could be an elegant solution of what I was trying to achieve :)

$("input").on("click", function() {
    var j = $("input:checked");
    t = 0;
    $(j).each(function() {

        t += parseInt(this.value, 10);
    });
    $("#total").html("<span>€ " + t + "</span>");
    });

jQuery Fetching data and making sum

4 Answers4