Adding values from inputs together in jquery

Question

I have the following table:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Female</th>
            <th>Male</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rising 1</td>
            <td>
                <input id="firstinput" />
            </td>
            <td>
                <input id="secondinput" />
            </td>
        </tr>
        <tr>
            <td>Rising 2</td>
            <td>
                <input id="thirdinput" />
            </td>
            <td>
                <input id="fourthinput" />
            </td>
        </tr>
        <tr>
            <td>2+</td>
            <td>
                <input id="fifthinput" />
            </td>
            <td>
                <input id="sixthinput" />
            </td>
        </tr>
    </tbody>
</table>

I'm wanting to add all the values in these inputs together and display their value:

$(document).ready(function () {

        $('#mybutton').click(function () {

            alert(parseInt($('#firstinput').val()) +
                parseInt($('#secondinput').val()) +
                parseInt($('#thirdinput).val()) +
                parseInt($('#fourthinput').val()) +
                parseInt($('#fifthinput).val()) +
                parseInt($('#sixthinput').val()));
        });
});

Well this only works when all the values are present in the table. If one is empty end up with NaN.

How do you get around this?

Also am I approaching this completely wrong? Is there a better way to achieve this?

Joseph Silber · Accepted Answer · 2012-07-24 01:55:18Z

7

You could simply turn it into an or clause:

var total = 0;

$('input').each(function() {
    total += (+$(this).val() || 0);
});

alert(total);

Remember: +$(this).val() is a shortcut to parseInt( $(this).val() ). Although this is quite handy, it suffers from the same problem as parseInt; namely, if the string starts with a 0, it's parsed as base 8: parseInt("033"); // 27 +"033"; // 27 To be absolutely certain that doesn't happen, use parseInt with base 10: parseInt("033", 10); // 33 so, in our context, you'd use this: total += ( parseInt( $(this).val(), 10 ) || 0 );

edited Jul 24, 2012 at 1:55

answered Jul 11, 2012 at 23:22

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

4 Comments

Greg Guida Over a year ago

I like the use of + to convert val to an int. This is definitely the best answer.

Joseph Silber Over a year ago

@GregGuida - While very convinient, there's a catch. See my post.

Greg Guida Over a year ago

yeah, I get it but its just so much nicer to look at the first way, haha. you could practically fit it on one line.

Joseph Silber Over a year ago

@GregGuida - Turns out I was mistaken. +"033" is analogous to Number("033"), which is always parsed in base 10.

Ram · Accepted Answer · 2012-07-11 23:28:52Z

2

try this:

$('#mybutton').click(function () {
   var sum = 0;  
    $('input').each(function(){
       var val = parseInt(this.value, 10)
       if (isNaN(val)) { val = 0 }
       sum += val
    })
});

DEMO

edited Jul 11, 2012 at 23:28

answered Jul 11, 2012 at 23:23

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Tats_innit · Accepted Answer · 2012-07-12 01:07:51Z

2

Plz try this Workingdemo http://jsfiddle.net/SmRXL/4/ or http://jsfiddle.net/SmRXL/3/

You could use class and iterate it and sum it all.

rest demo will help, `:)

code

$(function() {
    $('#foo').click(function() {
        var total = 0;
        $('.hulk').each(function() {
            if ($(this).val() > 0) total += parseInt($(this).val());
        });
        alert(" TOTAL is => " + total);
    });
});

html

<table>
    <thead>
        <tr>
            <th></th>
            <th>Female</th>
            <th>Male</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rising 1</td>
            <td>
                <input class="hulk" id="firstinput" />
            </td>
            <td>
                <input class="hulk"  id="secondinput" />
            </td>
        </tr>
        <tr>
            <td>Rising 2</td>
            <td>
                <input class="hulk"  id="thirdinput" />
            </td>
            <td>
                <input class="hulk"  id="fourthinput" />
            </td>
        </tr>
        <tr>
            <td>2+</td>
            <td>
                <input class="hulk"  id="fifthinput" />
            </td>
            <td>
                <input class="hulk"  id="sixthinput" />
            </td>
        </tr>
    </tbody>
</table>

<input type="button" id="foo" value="TOTAL ME" />

edited Jul 12, 2012 at 1:07

answered Jul 11, 2012 at 23:25

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

1 Comment

Ricardo Lohmann Over a year ago

Move total to inside the click event, it's being increased all the time.

ahren · Accepted Answer · 2012-07-11 23:25:11Z

1

$("#mybutton").click(function(){
alert(addValues($("input")));   
});

function addValues(selector){
    var total = 0;
    selector.each(function(){
        var thisVal = parseInt($(this).val());
        if(!isNaN(thisVal)) total += thisVal;
    });
    return total;
}

use isNaN() to reliably check if a value is not a number.

above I've added it to a function for simplicity.

answered Jul 11, 2012 at 23:25

ahren

17k5 gold badges52 silver badges70 bronze badges

Comments

jackwanders · Accepted Answer · 2012-07-11 23:25:45Z

1

$('#myButton').click(function() {
    var sum = 0;
    $('table input').each(function(){
        val = parseInt($(this).val(),10);
        sum += isNaN(val) ? 0 : val;
    }
    alert(sum);
}

Be sure to include the radix of 10 in your call to parseInt so that 08 and 09 parse correctly.

answered Jul 11, 2012 at 23:25

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

Comments

HRÓÐÓLFR · Accepted Answer · 2012-07-12 15:19:43Z

1

In your code, change the parseInt($('#sixthinput').val())'s to parseInt($('#sixthinput').val() || 0). This way, it will return 0 if it is empty, and NaN if the input is invalid.

edited Jul 12, 2012 at 15:19

answered Jul 11, 2012 at 23:21

HRÓÐÓLFR

5,9925 gold badges34 silver badges35 bronze badges

7 Comments

Greg Guida Over a year ago

the || 0 has to go after the parseInt, not in it

HRÓÐÓLFR Over a year ago

@GregGuida that's not the case I'm afraid. Strange as it may be, in JavaScript, the expression "" || 0 will evaluate to 0.

Joseph Silber Over a year ago

@mikhailvs - But, if there's any non-digit text at the beginning of that string, it'll be truthy, and you'll still end up with NaN.

HRÓÐÓLFR Over a year ago

My point in my previous point was that I realize that I made a typo in my answer, but that I went with it anyway.

HRÓÐÓLFR Over a year ago

Yes, I know. However I maintain that even though I had a typo, my solution is valid. There's a difference between no input and incorrect input, which may need to be handled differently anyway. So if no input means 0, some input (resulting in NaN) may alert the user or something.

|

Greg Guida · Accepted Answer · 2012-07-11 23:21:42Z

0

NaN is falsey so you can use the or operator (||) to return the second value if the first is false.

$(document).ready(function () {

        $('#mybutton').click(function () {

            alert(parseInt($('#firstinput').val()) || 0 +
                parseInt($('#secondinput').val()) || 0 +
                parseInt($('#thirdinput').val()) || 0 +
                parseInt($('#fourthinput').val()) || 0 +
                parseInt($('#fifthinput').val()) || 0 +
                parseInt($('#sixthinput').val()) || 0 );
        });
});

answered Jul 11, 2012 at 23:21

Greg Guida

7,5004 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

Adding values from inputs together in jquery

7 Answers 7

4 Comments

Comments

1 Comment

Comments

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

1 Comment

Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related