Addition and subtraction multiple text fields

Question

I have a table in which I'm trying to add and subtract multiple text fields using jQuery on keydown or blur. While I can add successfully, I get all wrong results for subtraction.

HTML:

<input type="text" class="add" />
<input type="text" class="add" />
<input type="text" class="sub" />
<input type="text" class="sub" />
<label id="total"></label>

JS:

 $('.add').blur(function () {
     var sum = 0;
     $('.add').each(function () {
         if (!isNaN(this.value) && this.value.length != 0) {
             sum += parseFloat(this.value);
         }
     });

     $('#total').text(sum.toFixed(2));

 });

 $('.sub').blur(function () {
     var sum = 0;
     var val = $('#total').text();
     $('.sub').each(function () {
         if (!isNaN(this.value) && this.value.length != 0) {
             sum -= parseFloat(this.value);

         }
     });
     val = parseFloat(sum) - parseFloat(val);
     $('#total').text(val);

 });

FIDDLE

score 3 · Answer 1 · answered Aug 30 '13 at 20:36

I would suggest the next solution:

HTML:

<input type="text" class="calc" data-action="add" />
<input type="text" class="calc" data-action="add" />
<input type="text" class="calc" data-action="sub" />
<input type="text" class="calc" data-action="sub" />
<label id="total"></label>

JS:

$(document.body).on('blur', '.calc', function() {
    var result = 0;
    $('.calc').each(function() {
        var $input = $(this),
            value = parseFloat($input.val());

        if (isNaN(value)) {
            return;
        }

        var action = $input.data('action') == 'add' ? 1 : -1;

        result += value * action;
    });

    $('#total').text(result.toFixed(2));
});

Try it

score 3 · Accepted Answer · answered Aug 30 '13 at 20:36

3

Change:

val =  parseFloat(sum) - parseFloat(val);

to:

val =  parseFloat(val) + parseFloat(sum);

In the .sub handler, sum is negative, so you need to add it to val in order to subtract.

FIDDLE

answered Aug 30 '13 at 20:36

Barmar

741,623
53
500
612

SpYk3HH · Answer 3 · 2013-08-30T21:06:17.507

Based on your fiddle you could simply do the following:

$(function() {
    $(document).on('blur change keyup', '.add, .sub', function(e) {
        var sum = 0;
        $('.add, .sub').each(function(i) {
            if (!isNaN(this.value) && this.value.length != 0) {
                if ($(this).hasClass('add')) {
                    sum += parseFloat(this.value);
                }
                else {
                    sum -= parseFloat(this.value);
                }
            }
        });
        $('#total').text(sum.toFixed(2));
    })
})

EXAMPLE

FuN vERsiON!¡!

score 1 · Answer 4 · answered Aug 30 '13 at 20:42

How's this:

http://jsfiddle.net/fYSgn/

I've combined the the two blur functions

function parseOrZero(val){
    return parseFloat(val) || 0;
}
$('.add, .sub').blur(function () {
    var total = 0;
    for(i =0, as = $(".add, .sub"), asl = as.size(); i < asl; i++){
        if(i < 2){
            total += parseOrZero(as.eq(i).val());
        }else{
            total -= parseOrZero(as.eq(i).val());
        }
    }     
    $('#total').text(total);
});

score 1 · Answer 5 · answered Aug 30 '13 at 22:37

shortest version of jquery to do what you want...inspiring really.

http://jsfiddle.net/techsin/QHgdZ/5/

var total, f=$('#total'), s=$('.calc');
s.blur(function(){
    var t=$(this),total=0;
    t.data('i',t.val()*((t.data('action')=='sub')?-1:1));
    s.each(function(){total+=~~$(this).data('i');});
    f.text(total);});

and yes this is all code...

score 0 · Answer 6 · answered Jan 06 '14 at 06:40

<html>
<head>
<script language="javascript">
function Sum()
{
var num1,num2,res;
num1=document.getElementById("txtnum1").value;
num2=document.getElementById("txtnum2").value;
res=parseInt(num1)+parseInt(num2);
document.getElementById("txtres").value=res;
}

function Subtract()
{
var num1,num2,res;
num1=document.getElementById("txtnum1").value;
num2=document.getElementById("txtnum2").value;
res=num1-num2;
document.getElementById("txtres").value=res;
}



</script>
</head>
<body>
<table align="center">
<tr>
<td>Num1</td>
<td><input id="txtnum1" onChange="Sum()" /></td>
</tr>
<tr>
<td>Num2</td>
<td><input id="txtnum2" onChange="Sum()"  /></td>
</tr>
<tr>
<td>Result</td>
<td><input id="txtres" /></td>
</tr>

</table>
</body>
<html>

Addition and subtraction multiple text fields

6 Answers6

EXAMPLE

FuN vERsiON!¡!