从多个输入字段中减去值

Question

I'm using the following code to take the value of one field, subtract it from the value of another field and display the result.

$(document).ready(function() {  

    var numIn;
    var numOut;
    var total;

    $('#submit').click(function() {
        numIn = $('input.in').val();
        numOut = $('input.out').val();
        total = numIn-numOut;

        $('span').remove();
        $('body').append('<span>&#163;'+total+'</span>');
        $('span').fadeIn(250);
    });
});

I want to create a sort of income/expenditure calculator. so my question is, say I had multiple income fields and multiple expenditure fields how would I take the total value from the income fields away from the total value of the expenditure fields.

Here is an example form in case I haven't been clear.

<form>
<input class="in" type="text">
<input class="in" type="text">
<input class="in" type="text">
<input class="in" type="text">
<input class="out" type="text">
<input class="out" type="text">
<input class="out" type="text">
<input class="out" type="text">
<input type="submit" id="submit" value="Submit">

Answer 1

You could loop over the .in and .out fields, and add their values as you go.

Example: http://jsfiddle.net/tXPeg/3/

var numIn = 0;
var numOut = 0;
var total;

$('#submit').click(function() {
    $('input.in').each(function() {
        return numIn += (parseFloat(this.value) || 0);
    });
    $('input.out').map(function() {
        return numOut += (parseFloat(this.value) || 0);
    });
    total = numIn - numOut;

    $('span').remove();
    $('body').append('<span>&#163;' + total + '</span>');
    $('span').fadeIn(250);
    return false;
});​

EDIT: Changed to use parseFloat() instead of parseInt() .

Answer 2

Actually after testing a little further the only problem is that if one or more fields are empy it returns 'NaN'.

I tried adding conditional statements to check that the field had a value but no luck: Feel free to edit my example: http://jsfiddle.net/QaEcD/3/

$('#submit').click(function() {
    var numIn = 0;
    var numOut = 0;
    var total = 0;

    $('input.in').each(function() {
        if($(this).val().length !== 0){
            return numIn = numIn + parseInt(this.value);
        });
    });
    $('input.out').map(function() {
        if($(this).val().length !== 0){
            return numOut = numOut + parseInt(this.value);
        });
    });

    total = numIn-numOut;

    $('span').remove();
    $('body').append('<span>&#163;'+total+'</span>');
    $('span').fadeIn(250);
    return false;
});

});