Add real Brazilian currency div

Question

The script is adding up, but only numbers. I would like to have the values with dots and commas.

For example: 1,000,00 + 100,00 = 1,100,00

Somebody give that strength?

Follow the code below:

<script src="jquery_somar.js"></script>

<div class="somar">1.000,00</div>
<div class="somar">1.000,00</div>
<div class="somar">1.000,00</div>
<div id="resultado">3.000,00</div>

<script type="text/javascript">
    var sum = 0;
    $('.somar').text(function(i, v) {
        sum += parseFloat(v.replace(',', '.'));
    });
    $('#resultado').text('resultado : ' + sum);
</script>

Answer 1

You can use the toLocaleString() to format the result. It will automatically adopt the way of showing the country that is configured on the computer. But if you want to force Brazil you can do so: .toLocaleString('pt-BR').

If you want to force two decimal places on the result, to give 3.000,50 in time of 3.000,5 you can use a second argument like I did in the example below:

So the code could be:

var total = $('.somar').get().reduce(function(tot, el) {
    var numero = el.innerHTML.split('.').join('').split(',').join('.');
    return tot + Number(numero);
}, 0);
$('#resultado').html(total.toLocaleString(undefined, {minimumFractionDigits: 2}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="somar">1.000,00</div>
<div class="somar">1.000,50</div>
<div class="somar">1.000,00</div>
<div id="resultado"></div>

jsFiddle: https://jsfiddle.net/3gsgyhs0/3/

Answer 2

Tell me what you think. The comments in the code explain how it works.

// Remove pontos, vírgulas, espaços e marcadores de moeda.
function limpar(x) {
    return x.replace(",", "").replace(".", "").replace("R$", "").replace(" ", "");
}

// Recebe um número inteiro (valor em centavos) e devolve uma string com o
// seu valor formatado como se fosse um valor monetário em real.
function formatarMoeda(numero) {

    if (isNaN(numero)) return "Valor não preenchido corretamente";

    // Descobre se o valor é negativo e extrai o sinal.
    var negativo = numero < 0;
    numero = Math.abs(numero);

    // Usado para produzir a resposta, caractere por caractere.
    var resposta = "";

    // Converte o número para string.
    var t = numero + "";

    // Itera cada caractere do número, de trás para frente.
    for (var i = t.length - 1; i >= 0; i--) {
        var j = t.length - i;

        // Adiciona o caractere na resposta.
        resposta = t.charAt(i) + resposta;

        // Colocar uma vírgula ou um ponto se for o caso.
        if (j == 2) {
            resposta = "," + resposta;
        } else if (j % 3 == 2 && i != 0) {
            resposta = "." + resposta;
        }
    }

    // Preenche os zeros a esquerda para o caso de o valor ser muito pequeno (menos de um real).
    if (resposta.length < 4) {
        resposta = "0,00".substring(0, 4 - resposta.length) + resposta;
    }
 
    // Coloca o sinal de negativo, se necessário.
    if (negativo) resposta = "-" + resposta;

    // Coloca como prefixo a unidade da moeda.
    return "R$ " + resposta;
}

function somar() {
    // Obtém os dois valores digitados.
    var a = parseInt(limpar($("#campo1").val()), 10);
    var b = parseInt(limpar($("#campo2").val()), 10);

    // Executa a soma.
    var soma = a + b;

    // Formata o resultado como moeda.
    var resposta = formatarMoeda(soma);
    $("#resultado").html(resposta);
}

$(document).ready(function() {
    $("#executar").click(somar);
    testes();
});

// Teste de unidade para a função formatarMoeda.
function testes() {
    var testar = [0, -1, -100, 100, 99, 10, 9, 4567, 567, 12345678910, NaN, "banana", undefined, "", "-"];

    var resultados = "Testes:";
    for (var e in testar) {
        resultados += "<br>[" + testar[e] + "] -> [" + formatarMoeda(testar[e]) + "]";
    }

    $("#testes").html(resultados);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" id="campo1" value="R$ " />
    <input type="text" id="campo2" value="R$ " />
    <input type="button" id="executar" value="Somar" />
    <div>Resultado da soma: <span id="resultado"></span></div>
    <button name="reset" type="reset" class="btn btn-theme btn-lg">Limpar</button>
</form>

<div id="testes"></div>