Sum of two input value by jquery

Question

I have code :

function compute() {
    if ($('input[name=type]:checked').val() != undefined) {
        var a = $('input[name=service_price]').val();
        var b = $('input[name=modem_price]').val();
        var total = a + b;
        $('#total_price').val(a + b);
    }
}

In my code I want sum values of two text inputs and write in a text input that has an id of "total"

My two numbers don't sum together for example :

service_price value = 2000 and modem_price=4000 in this example total input value must be 6000 but it is 20004000

I am thinking seriously of writing a jQuery plugin to do the parseInt with radix solution. — Phillip Senn
– Phillip Senn, Commented Jan 29, 2013 at 23:32

Tadeck · Accepted Answer · 2011-07-01 20:45:17Z

27

Your code is correct, except you are adding (concatenating) strings, not adding integers. Just change your code into:

function compute() {
    if ( $('input[name=type]:checked').val() != undefined ) {
        var a = parseInt($('input[name=service_price]').val());
        var b = parseInt($('input[name=modem_price]').val());
        var total = a+b;
        $('#total_price').val(a+b);
    }
}

and this should work.

Here is some working example that updates the sum when the value when checkbox is checked (and if this is checked, the value is also updated when one of the fields is changed): jsfiddle.

edited Jul 1, 2011 at 20:45

answered Jul 1, 2011 at 20:37

Tadeck

138k28 gold badges155 silver badges201 bronze badges

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

1 Comment

sorpigal Over a year ago

If you are using parseInt like this you will almost certainly want to specify the radix: parseint(userdata, 10); Without this a zero-padded number such as e.g. 08 will be interpreted as octal, resulting in surprising values.

sorpigal · Accepted Answer · 2011-07-01 20:47:29Z

26

Because at least one value is a string the + operator is being interpreted as a string concatenation operator. The simplest fix for this is to indicate that you intend for the values to be interpreted as numbers.

var total = +a + +b;

and

$('#total_price').val(+a + +b);

Or, better, just pull them out as numbers to begin with:

var a = +$('input[name=service_price]').val();
var b = +$('input[name=modem_price]').val();
var total = a+b;
$('#total_price').val(a+b);

See Mozilla's Unary + documentation.

Note that this is only a good idea if you know the value is going to be a number anyway. If this is user input you must be more careful and probably want to use parseInt and other validation as other answers suggest.

edited Jul 1, 2011 at 20:47

answered Jul 1, 2011 at 20:38

sorpigal

26.3k8 gold badges60 silver badges78 bronze badges

1 Comment

Chaminda Bandara Over a year ago

A correct explanation and a good example, thank you @Sorpigal

Rodolfo · Accepted Answer · 2011-07-01 20:34:07Z

7

use parseInt as a = parseInt($('input[name=service_price]').val())

answered Jul 1, 2011 at 20:34

Rodolfo

4,19325 silver badges38 bronze badges

4 Comments

George Cummins Over a year ago

@ebad gh: .val() returns a string, so your attempted math operation just concatenates the strings. You need to convert the values to integers first, as Rodolfo suggested.

Terry Over a year ago

For validity's sake, use parseInt($('input[name=service_price]').val(), 10) instead. You need a radix.

George Cummins Over a year ago

@teddyrised: I've never used a radix because 10 is always supplied as the default. Why is it required?

pimvdb Over a year ago

@George Cummins: Try parseInt("080").

Vineesh K S · Accepted Answer · 2013-09-06 07:43:05Z

5

use parseInt

   var total = parseInt(a) + parseInt(b);


    $('#total_price').val(total);

answered Sep 6, 2013 at 7:43

Vineesh K S

1,9643 gold badges33 silver badges38 bronze badges

1 Comment

Ky - Over a year ago

Thanks for being the only answer that caught that OP made a var total and never used it :P

Apurba Ranjan · Accepted Answer · 2015-11-12 06:49:14Z

2

<script>
$(document).ready(function(){
var a =parseInt($("#a").val());
var b =parseInt($("#b").val());
$("#submit").on("click",function(){
var sum = a + b;
alert(sum);
});
});
</script>

answered Nov 12, 2015 at 6:49

Apurba Ranjan

211 bronze badge

1 Comment

Martin Prikryl Over a year ago

Can you comment your answer?

Michael · Accepted Answer · 2011-07-01 20:38:11Z

1

Cast them to a Number

$('#total_price').val(Number(a)+Number(b));

But before you do that

if (!isNaN($('input[name=service_price]').val()) {...

answered Jul 1, 2011 at 20:38

Michael

4,1004 gold badges31 silver badges51 bronze badges

Comments

pradip kor · Accepted Answer · 2017-05-31 13:27:35Z

-1

if in multiple class you want to change additional operation in perticular class that show in below example

$('.like').click(function(){    
var like= $(this).text();
$(this).text(+like + +1);
});

answered May 31, 2017 at 13:27

pradip kor

4594 silver badges9 bronze badges

Collectives™ on Stack Overflow

Sum of two input value by jquery

7 Answers 7

1 Comment

1 Comment

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related