I would like to know how to put this form to read only numbers like this [1,70] and [66.2]

Question

function CalcularIMC(){
    let formulario = document.getElementById("formulario");


    let altura = +formulario.altura.value;
    let peso = +formulario.peso.value;

    var imc = (altura * altura)/peso;


    formulario.IMC.value = imc.toFixed(2);
}

<form id="formulario">
  <legend>Seu IMC</legend>
  <div class="form=group">
    <label for="altura">Altura:</label>
    <input type="text" name="altura" placeholder="sua altura Ex: 1,80" maxlength="4" minlength="4">
  </div>

  <div class="form-group1">
    <label for="peso">Peso:</label>
    <input type="text" name="peso" placeholder="Seu peso Ex: 69,02" minlength="4" maxlength="4">
  </div>

  <div class="form-group2">
    <label for="IMC">IMC:</label>
    <input type="text" name="IMC" disabled="disabled">

  </div>
</form>

Answer 1

Hello, the best thing to do is to change your type="text" for type="number". This change will first make your input does not accept alphabetic or special characters, and in the second place will deliver a standard numeric return to your request, this means that when you consult the value of the field filled with 1.71 it will return 1.71 and your calculation will not be affected.

The input input code would look like this:

<input type="number" name="altura" placeholder="sua altura Ex: 1,80" maxlength="4" minlength="4">

<input type="number" name="peso" placeholder="Seu peso Ex: 69,02" minlength="4" maxlength="4">

See more input number settings here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Answer 2

To another answer suggested to change the fields to input type="number", that apparently solves the problem. Don’t forget to put the step, to allow decimal values.

In the example below, I used step="0.01" to allow two decimal places (if you only want one decimal place, use step="0.1"):

function calcularIMC(){
    let formulario = document.getElementById("formulario");

    let altura = parseFloat(formulario.altura.value);
    let peso = parseFloat(formulario.peso.value);
    if (isNaN(altura) || isNaN(peso) || peso <= 0 || altura <= 0) {
        alert('peso e altura devem ser números positivos');
        return;
    }

    let imc = peso / (altura * altura);
    formulario.IMC.value = imc.toFixed(2);
}

<form id="formulario">
  <legend>Seu IMC</legend>
  <div class="form=group">
    <label for="altura">Altura:</label>
    <input type="number" name="altura" placeholder="sua altura Ex: 1,80" maxlength="4" minlength="4" step="0.01">
  </div>

  <div class="form-group1">
    <label for="peso">Peso:</label>
    <input type="number" name="peso" placeholder="Seu peso Ex: 69,02" minlength="4" maxlength="4" step="0.01">
  </div>

  <input type="button" value="calcular" onclick="calcularIMC()">

  <div class="form-group2">
    <label for="IMC">IMC:</label>
    <input type="text" name="IMC" disabled="disabled">
  </div>
</form>

But there’s one detail: in a field input type="number", the decimal separator may vary according to the configuration of the locale of the browser or the attribute lang, then it is not guaranteed that it will always be comma.

Moreover, the fact that the number is shown with a comma and not a point is a mere visual question, because its value will always be with a dot. What you can control is the presentation (the way the value is shown), yet it is not guaranteed to work the same in all browsers. See the example below:

function mostrar(){
    let formulario = document.getElementById("formulario");

    console.log('peso1', formulario.peso1.value);
    console.log('peso2', formulario.peso2.value);
}

<form id="formulario">
    Com ponto (ou não): <input type="number" lang="en" name="peso1" step="0.01">
    <br>Com vírgula:<input type="number" lang="pt" name="peso2" step="0.01">

    <input type="button" value="mostrar valores" onclick="mostrar()">
</form>

If you run the above example in Firefox, the first input will display the number using the point as decimal separator, and the second will display the comma. This is because each field is using the settings relative to the locale, indicated by the attribute lang.

In Chrome, both will be displayed in the same way (either both with a dot, or both with a comma, depending on the language settings you set).

Also, if I type manually 1.43 in the second field, Chrome can convert the value correctly to 1.43, while in Firefox the value is not recognized (type manually and click on "show values").

Interestingly, if in Firefox I type 1,43 in the first field, it correctly takes the value.

Regardless of this mess of accepting or not certain values, the console.log will always show the value with dot.

---

Anyway, if the problem is just a matter of visualization, you can use lang="pt", what force the use of comma in some browsers, but knowing that can also or not accept point in others.

But if you want to accept that the user type a semicolon, another option is to keep the field as input type="text" and have a function that converts both cases to number. Something like this:

function converter(valor) {
    return parseFloat(valor.replace(',', '.'));
}

That is, if you have a comma, switch to a dot and make the conversion. If you have a dot, the replace does not change the string, and does the conversion.

Note also that I used parseFloat to convert to number. Use + in front of the value also "works", but there are cases where they do not give the same result (see here some examples <- this link speaks of parseInt, but the general idea is the same).

A case that gives difference is when the string is empty (ie when the field has not been filled). parseFloat('') returns NaN (not a number) while +'' returns 0. You want me to use zero if nothing is filled in? (even if you wanted to, anyway you would have to validate as I did above, otherwise you will divide by zero - and also note that the calculation was wrong, it is the weight that is divided by the square of the height, not the other way around).