Ir para conteúdo
Mauricio Molina

Calculo automatico inputs

Recommended Posts

Ola,

 

Tenho um formulário em abas onde cadastro dados dos alunos e mando para o banco de dados.

<div role="tabpanel" class="tab-pane" id="avaliacao">
	<div style="padding-top:20px;">
		<form class="form-horizontal"  action="" method="POST">
		  <div class="form-row">
            <div class="form-group col-md-2">
              <label for="peso">Peso</label>
                 <input type="text" name='peso' class="form-control" id="peso" placeholder="Peso">
                   </div>
							
			<div class="form-group col-md-2">
              <label for="altura">Altura</label>
                 <input type="text" name='altura' class="form-control" id="altura" placeholder="Altura em metros">
                   </div>
							
			<div class="form-group col-md-2">
              <label for="imc">IMC</label>
                <input type="text" name='imc' class="form-control" id="imc" placeholder="IMC">
                  </div>
						
																	
			<div class="form-group col-md-2">
              <label for="rcq">Relação Cintura Quadril</label>
                  <input type="text" name='rcq' class="form-control" id="rcq" placeholder="RCQ">
                                
</div>
	</div>	
	  </div>
		</div>

O que gostaria de fazer é que ao digitar os dois primeiros, Peso e Altura, o campo IMC fosse preenchido automaticamente com o resultado (número inteiro)

 

A fórmula para o calculo seria:

 

Peso / altura x altura

 

* Leia-se: peso dividido pela altura ao quadro

 

Mas sinceramente entendo pouco de javascript, alguém pode me dar uma força?

 

Tenho um script que peguei na internet que consigo fazer as operações matemáticas, mas não sei como alterar para realizar a operação acima.

 

E preciso que não mostre as casas após a virgula, como neste script abaixo.

 

<script type="text/javascript">
function id(el) {
  return document.getElementById( el );
}
function metros_perc( un, cooper ) {
  return parseFloat(un.replace(',', '.'), 10) * parseFloat(cooper.replace(',', '.'), 10);
}
window.onload = function() {
  id('mquadra').addEventListener('keyup', function() {
    var result = metros_perc( this.value , id('cooper').value );
    id('metros_perc').value = String(result.toFixed(2)).formatMoney();
  });

  id('cooper').addEventListener('keyup', function(){
    var result = metros_perc( id('mquadra').value , this.value );
    id('metros_perc').value = String(result.toFixed(2)).formatMoney();
  });
}

String.prototype.formatMoney = function() {
  var v = this;

  if(v.indexOf('.') === -1) {
    v = v.replace(/([\d]+)/, "$00");
  }

  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

  return v;
};
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Da uma olhada nesse código:

Html:

<div role="tabpanel" class="tab-pane" id="avaliacao">
    <div style="padding-top:20px;">
        <form class="form-horizontal" action="" method="POST">
            <div class="form-row">
                <div class="form-group col-md-2">
                    <label for="peso">Peso</label>
                    <input
                      id="peso"                       
                      type="text"
                      name='peso'
                      class="form-control"
                      placeholder="Peso">
                </div>

                <div class="form-group col-md-2">
                    <label for="altura">Altura</label>
                    <input
                      id="altura"
                      type="text"
                      name='altura'
                      class="form-control"
                      placeholder="Altura em metros">
                </div>

                <div class="form-group col-md-2">
                    <label for="imc">IMC</label>
                    <input
                      id="imc"                           
                      type="text"
                      name='imc'
                      class="form-control"
                      placeholder="IMC">
                </div>

                <div class="form-group col-md-2">
                    <label for="rcq">Relação Cintura Quadril</label>
                    <input
                      id="rcq"                           
                      type="text"
                      name='rcq'
                      class="form-control"
                      placeholder="RCQ">

                </div>
            </div>
        </form>
    </div>
</div>

 

JS:

function getElement(el) {
  return document.getElementById(el);
}

function validToCalc(fieldWeight, fieldHeight) {
  return fieldWeight.value && fieldHeight.value;
}

function calcImc(fieldWeight, fieldHeight) {console.log(fieldWeight, fieldHeight)
  const parsedWeigth = parseFloat(fieldWeight.replace(',', '.'));
  const parsedHeight = parseFloat(fieldHeight.replace(',', '.'));
                                            
  const calculatedImc = parsedWeigth/(parsedHeight * parsedHeight);
                                            
  return Math.round(calculatedImc.toFixed(2));
}

function initCalc(fieldWeight, fieldHeight) {
  const imcResult = calcImc(fieldWeight.value, fieldHeight.value);
  setImc(imcResult);
}

function setImc(imcResult) {
  getElement('imc').value = imcResult;
}

window.onload = function() {
  const fieldWeight = getElement('peso');
  const fieldHeight = getElement('altura');
  
  fieldWeight.addEventListener('keyup', function() {
    if(validToCalc(fieldWeight, fieldHeight)) {
      initCalc(fieldWeight, fieldHeight);
    }
  });

  fieldHeight.addEventListener('keyup', function(){
    if(validToCalc(fieldWeight, fieldHeight)) {
      initCalc(fieldWeight, fieldHeight);
    }
  });
}

 

Jsbin: https://jsbin.com/woluponofe/edit?html,js,console,output

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nossa perfeito obrigado!

 

Poderia explicar o código para eu poder entender?

 

Obrigado novamente!

 

edit: estou com um problema, tenho outro script sendo chamado na pagina, e um esta bloqueando o outro dependo a posição que chamo na pagina, quando posiciono em baixo funciona, bloqueando o de cima e vice versa.

 

Antes do fechamento da BODY, todos que estão sendo chamados:

 

	<!--Script Metragem Total-->		
	<script type="text/javascript" src="js/js_metragem_voltas.js"></script>
	<!--Script IMC-->		
	<script type="text/javascript" src="js/js_imc.js"></script>
    <!-- Foi colocado no final para a página carregar mais rápido -->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/holder.min.js"></script>
    <script src="js/offcanvas.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

O outro script é, preciso retirar o formato de dinheiro:

 


function id(el) {
  return document.getElementById( el );
}
function metros_perc( un, cooper ) {
  return parseFloat(un.replace(',', '.'), 10) * parseFloat(cooper.replace(',', '.'), 10);
}
window.onload = function() {
  id('mquadra').addEventListener('keyup', function() {
    var result = metros_perc( this.value , id('cooper').value );
    id('metros_perc').value = String(result.toFixed(2)).formatMoney();
  });

  id('cooper').addEventListener('keyup', function(){
    var result = metros_perc( id('mquadra').value , this.value );
    id('metros_perc').value = String(result.toFixed(2)).formatMoney();
  });
}

String.prototype.formatMoney = function() {
  var v = this;

  if(v.indexOf('.') === -1) {
    v = v.replace(/([\d]+)/, "$00");
  }

  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

  return v;
};

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Lenon John
      Detalhe importante:
      Se eu digito MINHA_CHAVE_JADLOG incorreta, ai eu recebo um retorno informado que as credenciais estão incorretas.
      Se eu digito MINHA_CHAVE_JADLOG corretamente, não recebo nenhum retorno.

      $dados = [
        'frete' => [
          'cepori' => '29010070',
          'cepdes' => '29300040',
          'frap' => '',
          'peso' => 2,
          'cnpj' => '00000000000100',
          'conta' => '000001',
          'contrato' => '',
          'modalidade' => 4,
          'tpentrega' => 'D',
          'tpseguro' => 'N',
          'vldeclarado' => 100,
          'vlcoleta' => ''
        ]
      ];
      $postfields = http_build_query($dados);
       
      $header = array();
      $header[] = 'Authorization: Bearer MINHA_CHAVE_JADLOG';
      $header[] = 'Content-Type: application/json';
      $header[] = 'description:';
       
      $curl = curl_init('https://www.jadlog.com.br/embarcador/api/frete/valor/');
      curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
      curl_setopt($curl, CURLOPT_POST, true);
      curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($curl, CURLOPT_POSTFIELDS, $postfields);
       
      $exec = curl_exec($curl);
      $jadlog = json_decode($exec);
       
      curl_close($curl);
       
      print_r($jadlog);
    • Por DuRodrig
      Pessoal, bom dia! 
      Estou fazendo uma página com um cálculo simples de porcentagem.
      Existe um formuário que coloco o valor da venda, a comissão é fixa em 13% e a tarifa é um valor que você coloca também.
      Exemplo: (valor da venda) R$ 100,00 - (comissão 13%) - (tarifa) R$ 8,50 = (resultado) R$ 78,50, só que está gerando o resultado de R$ 79,00.
      Como faço para corrgir esse problema?
      Segue o código:

       
      $(function(){ $('#valorVenda').on('input', function() { calculate(); }); $('#tarifa').on('input', function() { calculate(); }); function calculate(){ var pPos = parseFloat($('#valorVenda').val()); var tar = parseFloat($('#tarifa').val()); var result = " "; if(isNaN(pPos) || isNaN(tar)){ }else{ result = ((pPos - ((13.00 * pPos) / 100.00)) - tar).toFixed(2); } $('#total').val(result); } });  
      Desde já agradeço.
    • Por biakelly
      Oi, vim do fórum de PHP,  eu havia postado uma dúvida lá, mas acredito e por recomendação que minha dúvida seja melhor aplicada aqui.
       
      Bem, estou fazendo uma página que precisa ter a cotação do Bitcoin.
      Nesta pagina preciso de 2 inputs um que traga o preço do bitcoin e outro que traga o preço em real.
      Ex: 1 Bitcoin custa R$ xxx,00 reais (valor padrão)
       
      Mas ao digitar R$100,00 no campo real ele precisa trazer o preço equivalente a quantidade de Bitcoins que vale R$100,00
      O mesmo para o Bitcoin, se eu digitar uma fração ele precisaria trazer o valor em Reais.
       
      Encontrei um site que faz isso (https://dolarhoje.com/bitcoin-hoje/), mas queria algo para minha página parecido
       
       
      Bem, até consigo pegar o valor com este código simples em PHP:
       
      <?php $url = 'https://www.mercadobitcoin.net/api/btc/ticker'; $result = file_get_contents($url); $result = json_decode($result, true); ?>  
      Será que em Javascript é possível fazer isso? Desculpem, entendo quase zero de Javascript
      Vocês conseguem me ajudar?
    • Por BrazucaBostero
      Olá!
       
      Estou com uma dúvida daquelas sobre um código de calculo de desconto no javascript, abaixo segue o código
       
      JS
      function calcValor() { //Declarando as variaveis let preco, porcentagem, desconto, novopreco; //Obtendo dados atraves do prompt preco = parseFloat(document.getElementById("CAMPO_87").value); porcentagem = parseFloat(document.getElementById("CAMPO_85").value); alert(preco) document.getElementById("CAMPO_88").value = preco; alert(preco) //Realizando os calculos desconto = preco * porcentagem / 100; novopreco = preco - desconto; //O .toFixed(2) faz com que o valor seja corrijdo para duas casas decimais document.getElementById("CAMPO_88").value = novopreco; } HTML
      <div class="row"> <div class="col-md-2"><label class="a3label control-label" for="CAMPO_87">Valor da Mensalidade</label> <input class="a3formcontrol form-control" data-campo-id="@@87@@" data-nome="87 - Valor Mensalidade" data-tipo-documental-id="3" id="CAMPO_87" oninput="calcValor()" type="text" /> </div> <div class="col-md-2"><label class="a3label control-label" for="CAMPO_85">Bolsa (%)</label> <input class="a3formcontrol form-control" data-campo-id="@@85@@" data-nome="85 - Bolsa (%)" data-tipo-documental-id="3" id="CAMPO_85" oninput="calcValor()" type="text" /></div> </div> <div class="row"> <div class="col-md-2"><label class="a3label control-label" for="CAMPO_88">Mensalidade Final</label> <input class="a3formcontrol form-control" data-campo-id="@@88@@" data-nome="88 - Valor Mensalidade (F)" data-tipo-documental-id="3" id="CAMPO_88" type="text" oninput="calcValor()" /></div>  
       
      O que acontece, tenho 2 problemas, que estou a quase 1 semana e não consigo resolver
       
       
      Quando jogo somente o valor do campo mensalidade, ele deveria teoricamente aparecer no campo mensalidade final, independente ou não de haver desconto, porém para minha surpresa ele aparece exatamente igual a imagem abaixo
       

       
       
      E minha outra dúvida é sobre a questão de , e .
      Quando calculo desconto com , por exemplo. 2314,50, ele arredonda e quando coloco 2314.50, ele me da o valor exato. Alguém pode me dar uma luz? Desde já fico agredecido
    • Por Pedro Terra
      <section id="contato" class="imgcontato flexivel"> <article id="formulario"> <form class="cxformulario" action="envia_fale.php" method="post" name="form"> <div class="tituloContato">Aguardamos seu e_mail.</div> <label>Nome:</label> <input type="text" name="nome" maxlength="28" required="required"/> <label> E_mail:</label> <input type="email" name="email" maxlength="28" required="required"/> <label>Assunto:</label> <input type="text" name="assunto" maxlength="28" required="required"/> <label>Mensagem</label> <textarea name="mensagem" ></textarea> <div class="botoes"> <button type="submit" class="btenviar">enviar</button> <button type="reset" class="btlimpar">limpar</button> </div> </form> </article> </section>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.