Jquery mask for real currency

0

I'm using this mask:

mask ('#. ## 0.00', {reverse: true});

There are some inputs that get some calculations like this:

				$('#vd_ga').on('blur',function(){
					var vd_ga = $('#vd_ga').val().replace(',', '.');
					var pvm_ga = $('#pvm_ga').val();
					
					$('#vm_ga').val(vd_ga * pvm_ga);
					$('#eam_ga').val(vd_ga * pvm_ga);
					
				}); 

				$('#pvm_ga').on('blur',function(){
					var vd_ga = $('#vd_ga').val().replace(',', '.');
					var pvm_ga = $('#pvm_ga').val();
				
					
					$('#vm_ga').val(vd_ga * pvm_ga);
					$('#eam_ga').val(vd_ga * pvm_ga);

				}); 

<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-3 canais_titulo">
    Google Adwords
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_ga" id="vd_ga" class="real input_geral" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_ga" id="pvm_ga" class="input_geral_2" type="text" /><span class="canais_titulo"> dias</span>
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_ga" id="vm_ga" class="real input_geral" type="text" readonly />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-3">
    <input name="eam_ga" id="eam_ga" class="real input_geral_2" type="text" /><span class="canais_titulo"> Cliques</span>
  </div>
</div>

But if, for example, I make 90.00 times 2, it will give 180. And the mask is in two inputs with value. Do I have to do something else for the mask to work correctly?

    
asked by anonymous 13.02.2018 / 23:56

1 answer

1

Perhaps the best option is to use the toLocaleString

$(".real").mask('#.##0,00', {
  reverse: true
});

$('#vd_ga, #pvm_ga').on('blur', calculateValue);

function calculateValue() {
  var vd_ga = $('#vd_ga').val().replace(',', '.');
  var pvm_ga = $('#pvm_ga').val();

  $('#vm_ga').val(convertToCurrency(vd_ga * pvm_ga));
  $('#eam_ga').val(convertToCurrency(vd_ga * pvm_ga));
}

function convertToCurrency(value) {
  return value.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 2
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.js"></script>

<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-3 canais_titulo">
    Google Adwords
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vd_ga" id="vd_ga" class="real input_geral" type="text" />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="pvm_ga" id="pvm_ga" class="input_geral_2" type="text" /><span class="canais_titulo"> dias</span>
  </div>
  <div class="col-xs-12 col-sm-2 col-md-2">
    <input name="vm_ga" id="vm_ga" class="real input_geral" type="text" readonly />
  </div>
  <div class="col-xs-12 col-sm-2 col-md-3">
    <input name="eam_ga" id="eam_ga" class="real input_geral_2" type="text" /><span class="canais_titulo"> Cliques</span>
  </div>
</div>
    
14.02.2018 / 01:57