Jquery mask for real currency

Asked

Viewed 3,690 times

0

I’m wearing this mask:

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

There are some inputs that receive some calculations, such as 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 do 90 times 2, it will be 180. And the mask is in two inputs with value. I have to do something else to make the mask work properly?

jquery

  • It is not clear which mascara plugin you are using (I edited your question and put an option, make sure it is correct). Otherwise it’s not clear what the problem is

  • Wow, I forgot. It’s the <script type="text/javascript" src=".. /js/jQuery-Mask-Plugin/dist/jquery.mask.min.js"></script>. The problem is that it was to give 180,00 and not 80, because in the example are 90,00 x 2 = 180,00

1 answer

1

Perhaps the best option is to use the method 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>
<script src="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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.