Jump to content
Marcos RJ

Máscara com Javascript

Recommended Posts

Olá pessoal. Na paz?

 

É o seguinte, tenho um formulário onde gera um cálculo automático conforme abaixo:

 

<div class="container">
 <form method="post" style="margin-top: 10px">
 <div class="form-group"><label>Valor Total: </label><input type="text" id="valorTotal" class="form-control" value="12000.00" onchange="calcular()"></div>
<div class="form-group">
    <div class="col-md-12">
    <input type="radio" name="JurosDesconto" onclick="desabilitarJurosDesconto(0)"> <label>Juros: <small>Cobrar após o vencimento</small></label>
    <div class="input-group" style="width: 30%">
            <input type="number" name="Juros" id="juros" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" onchange="calcular()" disabled>
                <span class="input-group-addon" id="basic-addon2">%</span>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
    <input type="radio" name="JurosDesconto" onclick="desabilitarJurosDesconto(1)"> <label>Desconto:</label>
    <div class="input-group" style="width: 30%">
            <input type="number" name="Desconto" id="desconto" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" onchange="calcular()" disabled>
                <span class="input-group-addon" id="basic-addon2">%</span>
        </div>
    </div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="checkbox" name="QTDParcelas" id="qtdParcelas" onclick="desabilitarQtdParcelas()"> <label>Qtd. de parcelas:</label>
    <div class="input-group" style="width: 30%">
    <input type="number" name="QuantidadeParcelas" id="parcelas" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" onchange="calcular()">
    </div>
</div>
</div> 
<div class="form-group" style="margin-top: 10px">
  <label for="nomealuno" class="control-label">Valor Final: <span style="color: red">*</span></label>
  <input type="text" name="ValorFinal" id="valorFinal" class="form-control" onchange="calcular()" required="required">
</div>
<div class="form-group">
  <label for="nomealuno" class="control-label">Valor das parcelas: <span style="color: red">*</span></label>
  <input type="text" name="ValorParcelas" id="valorParcelas" class="form-control" onchange="calcular()" required="required" onchange="calcular()">
</div>
 </form>
 </div>

 

Javascript

 

 

<script type="text/javascript">

function calcular(){

var valor1 = document.getElementById('valorTotal').value;// valor total

var valor1T = parseFloat(valor1.replace(/[^0-9,]*/g, '').replace(',', '.'));

var valor2 = parseInt(document.getElementById('juros').value); // juros

var valor3 = parseInt(document.getElementById('desconto').value); // descontos

var valor4 = document.getElementById('valorParcelas').value; // parcelamento

if (!isNaN(valor1T) && !isNaN(valor2) && !isNaN(valor3) && !isNaN(valor4)){

if(valor2){ // juros

var valorT = (valor1T * (valor2/100)) + valor1T;

}

if(valor3){ // desconto

var valorT = (valorT * (valor3/100)) - valor1T;

}

if(valor4){ // parcelamento

var valorP = valorT / valor4;

if(valor2){

var valorPP = (valorP * (valor2/100)) + valorP;

}else if(valor3){

var valorPP = (valorP * (valor3/100)) - valorP;

}else{

var valorPP = valorP;

}

}

var valorFinal = "R$ " + parseFloat(valorT).toFixed(2)

.replace('.',',')

.replace(/([0-9]*)([0-9]{3},*)/, '$1.$2');

document.getElementById('valorFinal').value = valorFinal;

if(!isNaN(valorPP)){

var valorFinal = "R$ " + parseFloat(valorPP).toFixed(2)

.replace('.',',')

.replace(/([0-9]*)([0-9]{3},*)/, '$1.$2');

var valorParcelas = "R$ " + parseFloat(valorPP).toFixed(2)

.replace('.',',')

.replace(/([0-9]*)([0-9]{3},*)/, '$1.$2');

document.getElementById('valorFinal').value = valorFinal;

document.getElementById('valorParcelas').value = valorParcelas;

}

}

}

</script>

O problema está quando mostro o resultado no campo valorFinal e valorParcelas. Quando crio a máscara de retorno e o valor não é milhar, me retorna dessa forma R$ .323,00. O trecho seria esse:


 

var valorFinal = "R$ " + parseFloat(valorPP).toFixed(2)

.replace('.',',')

.replace(/([0-9]*)([0-9]{3},*)/, '$1.$2');

var valorParcelas = "R$ " + parseFloat(valorPP).toFixed(2)

.replace('.',',')

.replace(/([0-9]*)([0-9]{3},*)/, '$1.$2');

Como faço para que essa máscara automática funcione com valores com e sem milhar?

 

Share this post


Link to post
Share on other sites

Ve se isso te ajuda.


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput-1.3.js" type="text/javascript"></script>

<script>
jQuery(function($){
$("#fone").mask("(99)-9999-9999");
$("#celular").mask("(99)-99999-9999");
$("#ssn").mask("999-99-9999");
$("#x_CPF").mask("999.999.999-99");
$("#x_RG").mask("999.999.999-9");
$("#x_CNPJ").mask("999.999.999/9999-99");
$("#x_IE").mask("999.999.999");
});
</script>

 

Monte sua mascara.

 

Peace!!!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Jack Oliveira
      Ola pessoal montando um limitador a ser selecionado no SELECT OPTION ele ate faz a contagem  certo etc...
       
      porem não estou conseguindo fazer esta contagem continuar pois ja esta cadastrado no banco o maximo permetido
       
      <div class="col-md-6"> <div class="form-group"> <label>Categorias: </label> <select class="form-control select2" name="categorias[]" id="SelecionaQtdOption" multiple="multiple" data-placeholder="<?php echo $txt['todos_os_mods']; ?>"> <option value="">Selecionar Categorias</option> <?php foreach($categorias as $categoria){ if(strpos($Dados['categorias'], $categoria['titulo']) !== false){ ?> <option selected value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } else { ?> <option value="<?= $categoria['titulo']; ?>"><?= $categoria['titulo']; ?></option> <?php } } ?> </select> </div> </div> java esta desta forma
      <?php $QtdCategoria = 3; ?> <script type="text/javascript"> $(document).ready(function() { var selecionarOpiton = null; $('#SelecionaQtdOption').change(function(event) { if ($(this).val().length == <?= $QtdCategoria; ?>) { //Limitar Quantidade de categoria a ser selecionanda no select Option $(this).val(selecionarOpiton); } else { selecionarOpiton = $(this).val(); } }); }); </script>  
    • By gersonab
      Bom dia a todos, preciso aplicar duas máscaras em uma janela modal, não estou conseguindo fazer, fora dela as mascaras funcionam.
      <div class="form-group col-md-4"> <label>Data pagamento</label> <input type="text" name="dataval" class="form-control" id="dataapp"> </div> <div class="form-group col-md-4"> <label>Valor</label> <input type="text" name="valpro" class="form-control" id="money"> </div> utilizo este plugin
      <script src="../plugins/input-mask/jquery.inputmask.bundle.min.js"></script> $("#money").inputmask("999,999,999.999"); $("#dataapp").inputmask("99/99/9999"); desde já agradeço qq ajuda
    • By Jack Oliveira
      Ola pessoal boa noite 
       
      Bom é o seguinte
       
      Como eu posso fazer uma contagem de imagens que poderá ser carregado pelo input  file
      Exemplos 
      <!-- img1 carregar apenas 3 imagens --> <input type="file" name="img1"> <!-- img2 carregar apenas 6 imagens --> <input type="file" name="img2"> <!-- img3 carregar apenas 9 imagens --> <input type="file" name="img3"> <!-- img4 carregar apenas 12 imagens --> <input type="file" name="img4"> Ouver um jeito também de bloquear se for selecionado mais do que for permitido...
       
      Já vi isso em alguns site quando for selecionar as imagens se passar da quantidade ele não seleciona mais nenhuma imagem. 
       
      Se img1 ja tiver as 3 imagens nao permite selecionar ou então ocultar o input se a quantidade ja foi cadastrada..
       
      Se o usuário tiver as 3 imagens e se ele apagou uma ele podera selecionar apenas uma e nada mais...
       
      Se teria como fazer isso apenas com php ou teria que usar jquery ou javascript..
       
      Espero que possam entender..
       
       
      Obs: não precisa ser codigo grande pra pouca coisa; que possa ser mais simplificado possível..
    • By Vinixops
      Bom dia!
       
      Não estou conseguindo receber os dados de um campo textarea e um select. Estou tentando via jquery. Todos os campos input são recebido corretamente.
      Testei de várias formas e não consegui.
       
      Vou colocar os trechos do código. Fico grato caso alguém possa ajudar.
       
       
      Função que uso para enviar os dados para página que fazer o tratamento.
      // --> Envia dados Formulario Orçamento - Start <--
          jQuery(function($){                
              $('#OrcIndex').submit(function(){
                  event.preventDefault();                    
                  $.post('CadastraOrcIndex.asp', $('#OrcIndex input'), function(retorno){
                      if(retorno){                        
                          //alert(retorno);
                          $("#PrintaOrcIndex").html(retorno);
                      }else{
                      }
                  }, 'html');
                  return false;
              });
          });
      // --> Envia dados Formulario de Orçamento - End <--
       
      Formulário o que preciso enviar os dados para tratamento.
       
                               <form method="post" id="OrcIndex" name="OrcIndex">
                                      <input type="hidden" id="latitude" name="Latitude">
                                      <input type="hidden" id="longitude" name="Longitude">
                                  <div class="row g-3">
                                      <div class="col-12 col-sm-6">
                                          <label>Seu nome</label>
                                          <input name="NomeOrc" type="text" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Seu e-mail</label>
                                          <input name="EmailOrc" type="email" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Seu celular</label>
                                          <input name="CelularOrc" type="text" class="form-control border-0" style="height: 55px;">
                                      </div>
                                      <div class="col-12 col-sm-6">
                                          <label>Escolha o setor</label>
                                          <select name="SetorOrc" id="SetorOrc" class="form-select border-0" style="height: 55px;">
                                              <option value="Selecione" selected>Selecione</option>
                                              <option value="Energia Solar">Energia Solar</option>
                                              <option value="Aquecimento Solar">Aquecimento Solar</option>
                                              <option value="Câmeras e Monitoramento">Câmeras e Monitoramento</option>
                                              <option value="Automação Residencial">Automação Residencial</option>
                                              <option value="Automação Comercial">Automação Comercial</option>
                                              <option value="Redes e Informática">Redes e Informática</option>
                                          </select>
                                      </div>
                                      <div class="col-12">
                                          <label>Detalhe sua necessidade </label>
                                          <textarea name="DetalheOrc" id="DetalheOrc" class="form-control border-0"></textarea>
                                      </div>
                                      <div class="col-12">
                                          <button class="btn btn-primary rounded-pill py-3 px-5" type="submit">Solicitar Orçamento</button>
                                      </div>
                                  </div>
                              </form>
                          <span id="PrintaOrcIndex">&nbsp;</span>
    • By vmenezes
      ola galera . tenho uma aplicação com asp  e utilizo javascript para bater foto do cliente . consigo apos a foto batida salvar no pc com o ID do cliente,
      porem gostaria que assim que a foto fosse batida salvasse na raiz do proprio site.
      tem como fazer isso ?
      obg
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.