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

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 PRWEB
      Boa tarde!!!
       
      Por favor como faço para marcar um checkbox e ai marca automaticamente um campo radio?
       
      Obrigado
    • By Randys
      Eu selecionei um elemento e adicionei a classe ativo nele, agora não estou conseguindo remover a classe quando eu seleciono outro elemento
      const article = document.getElementById(id); article.classList.add('ativo'); Eu preciso remover a classe ativo quando eu clicar em outro elemento article, como faço isso?
    • By Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
×

Important Information

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