Jquery parseFloat, parseInt

Question

I have the following situation: I am using jquery and I need to summarize some fields in my form. I found the NaN error in the intermediate field and . I tried my best to avoid this type of error, I just need SUM in this field. Everything in my form works fine, only with these two fields with the problem. I use parseFloat()and no answer. Only 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 your help !: - /

WARNING: I am using the plugin:
jquery.numberformatter - Formatting / Parsing numbers in jQuery 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];

:

$( 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 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 = '';
        }
    });

: http://jsfiddle.net/U9V6x/

Answer 2

, parseFloat() , . :

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

Answer 3

, : http://code.google.com/p/jquery-numberformatter/

, DOM , . , .

$(document).ready( function() {
 $('#valor, #taxa, #imposto, #envio, #taxa_adicional, #subtotal, #total').blur(function(){
/*
  // first update all fields to have the correct format, so we can work with them later.
  $('#valor').format({format:"#,###.00", locale:"br"});
  $('#taxa').format({format:"#,###.00", locale:"br"}); 
  $('#imposto').format({format:"#,###.00", locale:"br"}); 
  $('#envio').format({format:"#,###.00", locale:"br"});
  $('#taxa_adicional').format({format:"#,###.00", locale:"br"}); 
*/
  //separating because I'm pretty sure this would work in place of all those lines of code:
  // needs testing though. If this doesn't work uncomment the previous block and delete this line
  $('#valor,#taxa,#imposto,#envio,#taxa_adicional').format({format:"#,###.00", locale:"br"}); 

  // then since the values have been formatted, let extract just the floats like you wanted
  // going through the document.getElementById since the jQuery wrapper is useless overhead and you don't need a jQuery object back out.
  var val = parseFloat( document.getElementById('val').innerHTML );
  var tax = parseFloat( document.getElementById('taxa').innerHTML );
  var imp = parseFloat( document.getElementById('imposto').innerHTML );
  var env = parseFloat( document.getElementById('envio').innerHTML );
  var xat = parseFloat( document.getElementById('taxa_adicional').innerHTML );

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

  var subtotal = val + tax + imp + env;
  var total = val + tax + imp + env + xat;

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

, . , , [1]

[1] ; ; ~ , , , ?

Answer 4

:

$(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(isNan(parseFloat(val))) val = 0;
            if(isNan(parseFloat(tax))) tax = 0;
            if(isNan(parseFloat(imp))) imp = 0;
            if(isNan(parseFloat(env))) env = 0;
            if(isNan(parseFloat(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);
    })

});