Calculo automatico inputs

[Mauricio Molina 0]

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>

 

[Mauricio Molina 0]

Alguém para dar uma força?

[wanderval 19]

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

[Mauricio Molina 0]

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;
};