JavaScript/JQuery – Somar float’s com máscara de moeda.

Neste post vou tentar demonstrar como fazer a soma de 2 valores float’s, com a máscara de moeda.

Para tal vamos usar um plugin em JQuery chamado meiomask.

Em primeiro lugar vamos fazer download do mesmo AQUI

Depois de fazer o download, como vou usar uma máscara personalizada, vamos fazer uma pequena alteração ao plugin. No local onde são definidas as diversas máscaras vamos adicionar o seguinte código:

'moeda' : { mask : '99,9999999', type : 'reverse', defaultValue : '000' },

Isto vai fazer com os nossos valores tenham o formato 9999999,99.

Se quiserem podem usar o formato que lá esta definido (decimal) que coloca o número com o formato: 999.999.999.999,99

Podem escolher qual o melhor para vocês.

De seguida no nosso html, vamos colocar as referencias para o JQuery e o meomask.

 

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.meio.mask.js"></script>

O próxima passo é aplicar a máscara aos input’s. Para tal:

jQuery(function ($) {
       $("#input1").setMask('moeda');
});

jQuery(function ($) {
       $("#input2").setMask('moeda');
});

Onde tem .setMask(‘moeda’) vocês colocam o nome que deram à vossa máscara.

 

De seguida, vamos definir 2 input’s e um botão para calcular a soma:

Introduza o 1º valor: <input id="input1"  />

Introduza o 2º valor: <input id="input2" />

<input type="button" id="mostrar_valor" value="Calcular Soma"/>

Para calcular a nossa soma, vamos usar 2 funções importantes que nos permitem somar float’s. parseFloat() e replace().

O parseFloat() faz a conversão do que colocamos no nosso input para float e o replace vamos usar para trocar o “,” pelo “.” para ser possível a soma dos input’s.

Para obtermos o valor no 1º input teríamos que fazer:

parseFloat($('#input1').val())

Depois para trocar o “,” pelo “.” teríamos:

.replace(",", ".")

No final temos:

parseFloat($('#input1').val().replace(",", "."))

Assim fazemos todo ao mesmo tempo, escusando escrever mais linhas de código.

A soma seria feita então assim:

var soma = parseFloat($('#input1').val().replace(",", ".")) + parseFloat($('#input2').val().replace(",", "."));

Para retornar o valor 1º usamos a função toFixed(#) que define o número de casas decimais. Para termos 2 casas decimais o código é:

.toFixed(2)

No valor retornado podemos também fazer uma troca do “.” pela “,” para ser mais fácil para o utilizador, e para manter coerência com os input’s.

Para tal teriamos:

alert(soma.toFixed(2).replace(".", ","));

O nosso código em JavaScript seria então:

            <script type="text/javascript">

        $(document).ready(function () {

			    jQuery(function ($) {

        			$("#input1").setMask('moeda');
			    });

			    jQuery(function ($) {

        			$("#input2").setMask('moeda');
			    });

			$('#mostrar_valor').click(function() {
				if($('#input1').val()=="" || $('#input2').val()=="")
						alert("Introduza 2 valores");

					else{

						var soma = parseFloat($('#input1').val().replace(",", ".")) + parseFloat($('#input2').val().replace(",", "."));

						alert(soma.toFixed(2).replace(".", ","));
					}
				});
        });

    </script>

Podem ver o demo a funcionar AQUI.


Esta entrada foi publicada em Informática - Geral, Informática - JavaScript, Informática - JQuery, Informática - Programação com as tags , , , , . ligação permanente.

6 Respostas a JavaScript/JQuery – Somar float’s com máscara de moeda.

  1. Também é possível utilizar o jQuery Validation plugin para as regras de um formulário.
    Esto parece-ma mais seguro, pois o projeto meioMask já está suspenso.

  2. daniel diz:

    Não funciona para milhares…

  3. Aqui está a funcionar

  4. Kleilson diz:

    Valeu cara me ajudou muito mesmo!
    Funcionando perfeitamente…

  5. Alex Camargo diz:

    Olá, muito bom o post!
    Mas como faço para o valor da soma aparecer num terceiro campo, ao invés, do alert?

    Abraços, God bless!

  6. Podes colocar por exemplo num input: $(‘#input’).val(soma.toFixed(2).replace(“.”, “,”));

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>