I can’t check the text boxes

Asked

Viewed 51 times

1

I would like to know how I calculate the BMI, but before that check if the textfield was filled.

And how to format height mask for self-prefilling (X.XX)?

<html>
<meta charset="utf-8">
<head>
<center>
<title>testando JS</title>
<font face = "Corbel">
<body>
<br>
<img width= "200px" height="100px" align="center" src="imagem/IMC_full.png"/>
<br>
<br>
<form>
Digite seu peso (Kg)<br>
<input type="text" name="peso" id="peso" value="xx" maxlength="3" size="10" style="text-align:center"><br><br>
Digite sua altura (m)<br>
<input type="text" name="altura" id="altura" value="x.xx" maxlength="4" size="10" style="text-align:center"><br><br>

<input type="submit" value="Calcular IMC" onclick="calculaIMC(),teste()">
<br>
<br>
<br>
<br>
<img width="800px" height="250px" align="center" src="imagem/tabela-imc.jpg" />
</form>

<script type="text/javascript">
function calculaIMC(){
var peso = document.getElementById("peso").value;
var altura = document.getElementById("altura").value;
var imc = Math.round(peso /(altura*altura));
alert("Seu IMC é "+imc);
}

function teste(){
if (peso ==""){
    alert("Prencha peso");
    document.peso.focus();
    return false;
}
if (altura ==""){
    alert("Preencha altura");
    document.altura.focus();
    return false;
}
}
</script>
</center>
</head>
</body>
</html>
javascript

2 answers

3

Calculating the BMI

Try to call only the method calculaIMC() at the time of the submit and within it put the validations before calculating the BMI.

Validating whether the field has been filled

The way you are doing it solves, you just have to pass the content from within the method teste() to the calculaIMC(), leaving more or less its method of calculating BMI:

function calculaIMC(){

var peso = document.getElementById("peso").value;
var altura = document.getElementById("altura").value;

if (peso ==""){
    alert("Prencha peso");
    document.peso.focus();
    return;
}
if (altura ==""){
    alert("Preencha altura");
    document.altura.focus();
    return;
}

var imc = Math.round(peso /(altura*altura));
alert("Seu IMC é "+imc);
}

Applying mask

I think instead of using masks you could use your own resource for the type of data you are entering in your Input’s, for example, replace the following input:

<input type="text" name="peso" id="peso" value="xx" maxlength="3" size="10" style="text-align:center">

By an input of the kind number can make you not need a number mask, and also makes much more sense, for being a field where only one number can enter, being as follows:

<input type="number" name="peso" id="peso" value="xx" maxlength="3" size="10" style="text-align:center">

The same change applies to the height input, but instead of number utilize decimal.

  • 1

    Thanks so much for the friendly answer!

1

First, your HTML is poorly formed. O <meta charset="utf-8"> should stay inside the <head>. The <center> and the <font face = "Corbel"> should stay inside the <body>. The <body> should not be inside the <head>. The order is thus:

<html>
    <head>
        <meta charset="utf-8">
        <title>Testando JS</title>
        <!-- Outras tags aqui se você quiser. -->
    </head>
    <body>
        <!-- O conteúdo da página vem aqui. -->
    </body>
</html>

Second, the tags <center> and <font> are considered obsolete 20 years ago! Since 1997, when HTML 4 came out. They should no longer be used. HTML 5 no longer accepts them (although the browser can still accept them for compatibility reasons). Use CSS instead.

Third, in its function teste, the document.peso and document.altura do not exist. Use the document.getElementById("peso") that you are using in the other function.

Fourth, within the function teste, the variables peso and altura are not defined. The fact that they are defined within calculaIMC makes them exist only within calculaIMC.

Fifth, do not use two functions within the onclick.

Sixth, use <input type="button"> costs to be much easier to work than <inpu type="submit">. You can give the submit via javascript.

Here’s your revised code, click the blue button Execute down there to test.

function calculaIMC(peso, altura) {
    return Math.round(peso / (altura * altura));
}

function teste() {
    var elementoResultado = document.getElementById("resultado");
    var elementoPeso = document.getElementById("peso");
    var elementoAltura = document.getElementById("altura");
    var peso = parseFloat(elementoPeso.value);
    var altura = parseFloat(elementoAltura.value);
    if (isNaN(peso) || peso <= 0.0) {
        elementoResultado.innerHTML = "Preencha o valor do peso com um número.";
        elementoPeso.focus();
        return;
    }
    if (isNaN(altura) || altura <= 0.0) {
        elementoResultado.innerHTML = "Preencha o valor da altura com um número.";
        elementoAltura.focus();
        return;
    }
    var imc = calculaIMC(peso, altura);
    elementoResultado.innerHTML = "Seu IMC é " + imc + ".";

    //document.getElementById("formulario").submit();
}
<form id="formulario">
    <div>
        Digite seu peso (Kg):
        <input type="text" name="peso" id="peso" value="xx" maxlength="3" size="10" style="text-align: center">
    </div>

    <div>
        Digite sua altura (m):
        <input type="text" name="altura" id="altura" value="x.xx" maxlength="4" size="10" style="text-align: center">
    </div>

    <div id="resultado"></div>

    <input type="button" value="Calcular IMC" onclick="javascript:teste()">
</form>

Ah, look at that code //document.getElementById("formulario").submit();? So if you take the // it will make the form Submit, but only if the weight and height are valid.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.