Sum input and divs with jquery - saving the value not working

Question

I have a very large form, which has inputs and normal divs with the class "calcsum". The inputs are filled from the user, and the divs are result from calculations, which are done by a input button and a click() function.

I'd like now to sum up all inputs and divs, when they have value. But I cannot make the script to read all the values.

$('#calculate').click(function() {
    var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){;
        console.log(Number($(this).val()));
        amount_sum += Number($(this).val());
    });
    $('#amount_worth').html(amount_sum);
});

This is working with the normal input fields, but the values from the divs are ignored. I have tried several other ways with val() but none works. I do not understand why the values from the divs are ignored. Please help... :(

Here examples from the HTML:

<tr>
    <td colspan="3">Bargeld</td>
    <td><input type="text" name="cash" value="" id="amount_1" class="calcsum notice" title="Istwert eingeben"/></td>
    <td><div class="style_calculated" id="nextam_1"></div></td>
</tr>

And here the div:

<tr>
    <td colspan="2"><b>Bestandswert Gesamt:</b></td>
    <td><input type="button" name="bestandswert" id="calculate_goods" value="Berechnen" /></td>
    <td><div class="style_calculated calcsum" id="tradegoods" id="amount_14"></div></td>
    <td><div class="style_calculated nextsum" id="next_tradegoods"></div></td>
</tr>

(The second field with next is not relevant at the moment, this comes later)

On the second html example, you can see that the div with tradegoods is the one missing. The value will be filled after pressing on "calculate_goods" .. do you need the example script also?

Techroshni · Accepted Answer · 2014-06-16 09:32:44Z

2

You can't access the Div's content using $(this).val(). Instead you have to either use $(this).html() or $(this).text() to get the value stored inside the Div.

answered Jun 16, 2014 at 9:32

Techroshni

5412 silver badges11 bronze badges

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

Comments

Matt · Accepted Answer · 2014-06-16 09:47:02Z

1

The reason the div tags are being ignored, is because the .val() isn't reading the text of the div.

You would need to modify your code to check for the .text() of the div:

$('.calcsum').each(function(){;
    value = ($(this).is("input")) ? Number($(this).val()) : Number($(this).text());
    amount_sum += value;
    console.log(value);
})

edited Jun 16, 2014 at 9:47

answered Jun 16, 2014 at 9:28

Matt

3,1204 gold badges32 silver badges36 bronze badges

1 Comment

Owl Over a year ago

omg thank you so much I really need a break when its that simple!

Bhushan Kawadkar · Accepted Answer · 2014-06-16 09:30:52Z

1

Check if it is div then read .text() otherwise .val() of it.

$('#calculate').click(function() {
    var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){;
        var value = $(this).is('div')?$(this).text():$(this).val();
        console.log(Number(value ));
        amount_sum += Number(value );
    });
    $('#amount_worth').html(amount_sum);
});

answered Jun 16, 2014 at 9:30

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Jey · Accepted Answer · 2014-06-16 09:38:40Z

Try the following code it could be resolved your issue,

Your script like this,

$(document).ready(function () {
        $('#calculate').click(function () {
            var amount_sum = 0;
            //calculate total worth of money
            $('.add').each(function () {;
                amount_sum += Number($(this).val());
            });
            $('#amount_worth').html(amount_sum);
        });
    });

Your style sheet like this,

.add {
        width:100px;
    }

your form like this,

<form id="frm">
<input type="text" class="add" id="1" />
<input type="text" class="add" id="2"/>
<input type="text" class="add" id="3"/>
<input type="text" class="add" id="4"/>
<input type="button" value="Add" id="calculate" />
<div id="amount_worth"></div></form>

Rahul Gupta · Accepted Answer · 2014-06-16 09:56:48Z

Check out this working fiddle

HTML:

<input type="text" class="calcsum" value="1">
    <input type="text" class="calcsum" value="2">
        <input type="text" class="calcsum" value="3">

            <div class="calcsum">4</div>
            <div class="calcsum">5</div>
            <div class="calcsum">6</div>

JS:

var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){
        //console.log($(this));
        //checks whether the DOM element is an input element or a div
        if(this.tagName.toLowerCase() == "input")
        {
            amount_sum += Number($(this).val());
        }
        else if(this.tagName.toLowerCase() == "div")
        {
            amount_sum += Number($(this).html());
        }
        console.log(Number($(this).val()));
    });

alert(amount_sum);

Collectives™ on Stack Overflow

Sum input and divs with jquery - saving the value not working

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related