How to take data from an input, make a calculation and play in another input?

Question

I would like to know how to take a value of a input, do the calculation and play the result in another input. Example: imc = peso x (altura)².And when one puts the height and weight on inputs, the calculation will be done and will appear in input of IMC.

I also have to perform calculations in other fields, but I would like a help because I do not know how to do these calculations, whether and in PHP or Javascript?

Follow the code below:

<div>
    <input class="campo-form-c" type="text" name="pesoatual" placeholder="Peso Atual">
</div>

<div>
    <input class="campo-form-c" type="text" name="altura" placeholder="Altura">
</div>

<div>
    <input class="campo-form-c" type="number" name="idade" placeholder="Idade"></br>
</div>

<div>
    <input class="campo-form-c" type="date" name="datan" placeholder="Data de nascimento"></br>
</div>

<div>
    <input class="campo-form-c" type="text" name="medidab" placeholder="Medida do Braço" maxlength="5">
</div>

<div>
   <input class="campo-form-c" type="text" name="medidat" placeholder="Medida Tricipital" maxlength="5">
</div>

<div>
   <input class="campo-form-c" type="text" name="medidaabd" placeholder="Medida Abdominal" maxlength="5"></br>
</div>

<div>
    <input class="campo-form-c" type="text" name="imc" placeholder="IMC" maxlength="4">
</div>

<div>
    <input class="campo-form-c" type="text" name="gorduratricpital" placeholder="Gordura Tricipital" maxlength="5">
</div>

<div>
    <input class="campo-form-c" type="text" name="circunferenciabraço" placeholder="Circunferência do Braço" maxlength="5"></br>
</div>

<div>
    <input class="campo-form-c" type="text" name="circunferenciambraço" placeholder="Circunferência Muscular do Braço" maxlength="5"></br>
</div>

Answer 1

Because they are values that will be typed, we recommend using Javascript to do the calculation. However, the imc formula in your question is incorrect. The correct one is:

imc = peso / (altura)² and not imc = peso x (altura)²

Formula: weight (in kg) divided by the square of the height (in metres¹).

To play the calculation value in the field name="imc", can use querySelector to take the values of the fields name="pesoatual" and name="altura" and update the result dynamically as values are entered in the fields:

var peso = document.querySelector("input[name=pesoatual]");
var altu = document.querySelector("input[name=altura]");
peso.addEventListener("keyup", calcImc, false);
altu.addEventListener("keyup", calcImc, false);

function calcImc(){
   var peso_val = parseFloat(peso.value);
   var altu_val = altu.value;
   altu_val.match(/[,.]/) ? altu_val=parseFloat(altu_val.replace(",",".")) : altu_val=parseFloat(altu.value)/100;
   imc = (peso_val / (altu_val * altu_val)).toFixed(1); // "1" significa 1 casa decimal
   if(!isNaN(imc)){
      document.querySelector("input[name=imc]").value = imc;
   }
}

<div>
    <input class="campo-form-c" type="text" name="pesoatual" placeholder="Peso Atual">
</div>

<div>
    <input class="campo-form-c" type="text" name="altura" placeholder="Altura">
</div>

<div>
    <input class="campo-form-c" type="number" name="idade" placeholder="Idade"></br>
</div>

<div>
    <input class="campo-form-c" type="date" name="datan" placeholder="Data de nascimento"></br>
</div>

<div>
    <input class="campo-form-c" type="text" name="medidab" placeholder="Medida do Braço" maxlength="5">
</div>

<div>
   <input class="campo-form-c" type="text" name="medidat" placeholder="Medida Tricipital" maxlength="5">
</div>

<div>
   <input class="campo-form-c" type="text" name="medidaabd" placeholder="Medida Abdominal" maxlength="5"></br>
</div>

<div>
    <input class="campo-form-c" type="text" name="imc" placeholder="IMC" maxlength="4">
</div>

<div>
    <input class="campo-form-c" type="text" name="gorduratricpital" placeholder="Gordura Tricipital" maxlength="5">
</div>

<div>
    <input class="campo-form-c" type="text" name="circunferenciabraço" placeholder="Circunferência do Braço" maxlength="5"></br>
</div>

<div>
    <input class="campo-form-c" type="text" name="circunferenciambraço" placeholder="Circunferência Muscular do Braço" maxlength="5"></br>
</div>

¹ Although the measure of official height of the calculation of the meters, for calculation purposes, the above code also accepts values in centimeters, the result will be the same.

Answer 2

Da para fazer com Javascript mesmo.

Follow a simple example https://jsfiddle.net/s9mn5nvf/

I hope it helps.