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.