Add real Brazilian currency div

Question

Add real Brazilian currency div

Navigation

#1 by (6 votes)
#2 by (4 votes)

5

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

For example: 1,000.00 + 100.00 = 1.100.00

Does anyone give this strength there?

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>

javascript jquery

asked by anonymous 14.08.2016 / 05:09

2 answers

4

I did so, tell me what you think. The comments in the code explain the operation.

// 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><inputtype="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>

14.08.2016 / 06:21

Is there a way to redirect to another page when I click on a div? Difference between ":" and "." in methods of a Lua table

score 6 · Accepted Answer

You can use toLocaleString() to format the result. It will automatically adopt the display mode of the country that is set up on the computer. But if you want to force Brazil you can do this: .toLocaleString('pt-BR') .

If you want to force two decimal places on the result, to give 3.000,50 instead of 3.000,5 you can use a second argument as 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><divclass="somar">1.000,00</div>
<div class="somar">1.000,50</div>
<div class="somar">1.000,00</div>
<div id="resultado"></div>

Add real Brazilian currency div

2 answers

jsFiddle: link