Question

I have the following situation, I’m using jquery and I need to sum up some fields on my form.
I have found the NaN error in my subtotal field and total field.
I have tried everything possible to avoid this type of error, I just need the SUM on this field.
Everything in my form is working fine, only this 2 fields with a problem.
I’m using parseFloat() and no response. Only a field with NaN

Follow my javascript code:

$(document).ready( function() {

        $('#valor, #taxa, #imposto, #envio, #taxa_adicional, #subtotal, #total').blur(function(){

                    // exemplo antigo var val = $('#valor').val();
                    var val = $('#valor').format({format:"#,###.00", locale:"br"});
                var tax = $('#taxa').format({format:"#,###.00", locale:"br"}); 
                var imp = $('#imposto').format({format:"#,###.00", locale:"br"}); 
                var env = $('#envio').format({format:"#,###.00", locale:"br"});
                var xat = $('#taxa_adicional').format({format:"#,###.00", locale:"br"}); 

                if(val == "") val = 0;
                if(tax == "") tax = 0;
                if(imp == "") imp = 0;
                if(env == "") env = 0;
                if(xat == "") xat = 0;

                    var subtotal = parseFloat("val") + parseFloat("tax") + parseFloat("imp") + parseFloat("env");
                var total = parseFloat(val) + parseFloat(tax) + parseFloat(imp) + parseFloat(env) + parseFloat(xat);

                    $('#subtotal').format({format:"#,###.00", locale:"br"});
                $('#total').val(total);
        })

});

Thanks in advance for any help on this matter! :-/

WARNING: I’m using a plugin called:
jquery.numberformatter – Formatting/Parsing Numbers in jQuery Written by Michael Abernethy

Answer 1

HTML:

<div id="box">    
    <p> Valor: <input id="valor"> </p>
    <p> Taxa: <input id="taxa"> </p>
    <p> Imposto: <input id="imposto"> </p>
    <p> Envio: <input id="envio"> </p>
    <p> Taxa adicional: <input id="taxa_adicional"> </p>   
    <p> Subtotal: <span id="subtotal">0</span> </p>
    <p> Total: <span id="total">0</span> </p>   
</div>

JavaScript:

var options = {
        format: '#,###.00',
        locale: 'br'
    },
    inputs = $( 'input:text', '#box' ).get(),
    input_adicional = $( '#taxa_adicional' )[0],
    input_total = $( '#total' )[0],
    input_subtotal = $( '#subtotal' )[0];

and then:

$( inputs ).add( [ input_total, input_subtotal ] ).format( options );

$( inputs ).
    blur( function () {
        var total = 0,
            subtotal = 0;

        // on blur, format the field
        $( this ).format( options );

        // calculate the sum of all input fields
        $( inputs ).each( function () {
            total += +$( this ).parse( options );
        });

        // subtotal doesn't include the "additional" field  
        subtotal = total - $( input_adicional ).parse( options );

        // populate the SPAN's with the sums and format the nubmers
        $( input_subtotal ).text( subtotal ).format( options );
        $( input_total ).text( total ).format( options );
    }).
    focus( function () {
        // if the field contains the value 0, empty it
        if ( +$( this ).parse( options ) === 0 ) {
            this.value = '';
        }
    });

Live demo: http://jsfiddle.net/U9V6x/