jQuery automatic add two numbers from text fields

Question

I am trying to add two numbers whenever a keyup happens in the textboxes of those two numbers. I want it to use jquery so my addition code is these:

HTML:

<div class="container">
<h1>jQuery live Try</h1>
<form>
    <input type="text" placeholder="Number 1" class="num1 key">
    <input type="text" placeholder="Number 2" class="num2 key">
    <br><br>
    Sum: <input type="text" class="sum" readonly="readonly"><br><br><br>
</form>
</div>

Jquery:

$(document).ready(function(){
        $(".sum").val("0");
        $(".key").val("");

        function calc(){
        var $num1=$(".num1").val();
        var $num2=$(".num2").val();
        $(".sum").val($num1+$num2);
    }
    $(".key").keyup(function(){
        calc();
    });
});

But if i enter 1 and 2 it outputs 12 not 3. How can I make it output the sum?

The js fiddle

Strange, I don't know why that doesn't work, but this does : jsfiddle.net/qsnygcwg/5 — Karl-André Gagnon
– Karl-André Gagnon, Commented Mar 24, 2015 at 13:42
i can see now your fiddle works. i first added the + before val(+$num1+$num2) — Blaise M.
– Blaise M., Commented Mar 24, 2015 at 13:57

Mox Shah · Accepted Answer · 2015-03-24 13:55:11Z

4

use parseInt() to convert string to Number

function calc() {
    var $num1 = ($(".num1").val() != "" && !isNaN($(".num1").val())) ? parseInt($(".num1").val()) : 0;
    var $num2 = ($(".num2").val() != "" && !isNaN($(".num2").val())) ? parseInt($(".num2").val()) : 0;
    $(".sum").val($num1 + $num2);
}

Your overall code should look like this:

$(document).ready(function() {
    $(".sum").val("0");
    $(".key").val("");

    function calc() {

        var $num1 = ($.trim($(".num1").val()) != "" && !isNaN($(".num1").val())) ? parseInt($(".num1").val()) : 0;
        console.log($num1);
        var $num2 = ($.trim($(".num2").val()) != "" && !isNaN($(".num2").val())) ? parseInt($(".num2").val()) : 0;
        console.log($num2);
        $(".sum").val($num1 + $num2);
    }
    $(".key").keyup(function() {
        calc();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<h1>jQuery live Try</h1>
	<form>
		<input type="text" placeholder="Number 1" class="num1 key">
		<input type="text" placeholder="Number 2" class="num2 key">
		<br><br>
		Sum: <input type="text" class="sum" readonly="readonly"><br><br><br>
	</form>
</div>

edited Mar 24, 2015 at 13:55

answered Mar 24, 2015 at 13:29

Mox Shah

3,0153 gold badges29 silver badges44 bronze badges

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

6 Comments

Blaise M. Over a year ago

perfect. thank you. but what happens if the textbox is empty? according to your conditional operator

Mox Shah Over a year ago

If it's empty or NOT A NUMBER its value will be considered as a 0.

Mox Shah Over a year ago

@BlaiseM. have also used $.trim() value incase of white-space

Blaise M. Over a year ago

okay! now i can see: If num1 is not empty then parse int rather send 0

Blaise M. Over a year ago

I was just explaining the way i understood your conditional operator. Thank you

|

Mox Shah · Accepted Answer · 2015-03-24 14:24:39Z

1

the .val() method return a string, string 1 + string 2 = 12. So use the parseFloat method.

change

var $num1=$(".num1").val();
var $num2=$(".num2").val();

to

var $num1=parseFloat($(".num1").val());
var $num2=parseFloat($(".num2").val());

edited Mar 24, 2015 at 14:24

Mox Shah

3,0153 gold badges29 silver badges44 bronze badges

answered Mar 24, 2015 at 13:31

Jasper

8315 silver badges10 bronze badges

Comments

coder hacker · Accepted Answer · 2015-03-24 13:29:43Z

0

You should parse the string representation to Integer

var $num1=parseInt($(".num1").val());
var $num2=parseInt($(".num2").val());

answered Mar 24, 2015 at 13:29

coder hacker

4,8781 gold badge27 silver badges51 bronze badges

1 Comment

Karl-André Gagnon Over a year ago

Side note: Always specify a radix

empiric · Accepted Answer · 2015-03-24 14:28:44Z

0

The value returned from jQuery is a string so you have to cast your value into integers:

var $num1=parseInt($(".num1").val(), 10) || 0;
var $num2=parseInt($(".num2").val(), 10) || 0;
$(".sum").val($num1+$num2);

Demo

or use parseFloat() if you want to support floating numbers.

Another possibilty would be to use the Number()-function, as this will cast an empty string automatically:

var $num1=Number($(".num1").val());
var $num2=Number($(".num2").val());

Demo 2

Reference

parseInt()

Number()

edited Mar 24, 2015 at 14:28

answered Mar 24, 2015 at 13:28

empiric

7,8767 gold badges40 silver badges51 bronze badges

1 Comment

Mox Shah Over a year ago

Your demo shows NaN, as there's not check for blank values.

Collectives™ on Stack Overflow

jQuery automatic add two numbers from text fields

4 Answers 4

6 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related