I can not check the text boxes

Question

I can not check the text boxes

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I would like to know how I can calculate the BMI, but first check if the textfield has been filled.

And how to format height mask to auto fill (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

asked by anonymous 16.10.2017 / 04:39

2 answers

Convert Json to a Long type Console shows javascript logging very fast and no time preview output

score 3 · Answer 1

Calculating the BMI

Try to call only the calculaIMC() method at the time of the submit click and place the validations there before calculating the BMI.

Validating if the field was filled in

The way you're doing solves, you just have to pass the content from within the teste() method to calculaIMC() , leaving more or less your method of calculating your IMC:

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 that instead of using masks you could use your own resource for the type of data that 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 input type number can make you do not need a mask of numbers, and also makes a lot more sense, because it is a field where only a number can be entered, 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 use decimal .

score 1 · Answer 2

First, your HTML is malformed. The <meta charset="utf-8"> should be within <head> . The <center> and <font face = "Corbel"> should be within <body> . The <body> should not be within <head> . The order looks like this:

<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 <center> and <font> tags are considered obsolete 20 years ago! Since 1997, when HTML4 came out, they should no longer be used. HTML 5 does not accept them any more (although the browser can still accept the compatibility issue). Use CSS instead.

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

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

Fifth, do not use two functions within onclick .

Sixth, using <input type="button"> is much easier to work than <inpu type="submit"> . You can give submit via javascript.

Here's your revised code, click the blue Run button below 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, do you see in the code that //document.getElementById("formulario").submit(); ? So, if you take out // it will make the form submit, but only if the weight and height are valid.