Validation & Calculate BMI

Question

This is a BMI calculator. I expect to check the data validation first. text fields cannot be empty. And then calculate the BMI and display into another text box.. Validation part is working properly, but the calculating function is not. Please help me to find the error.

function validate() {
  if (document.myForm.weight.value == "") {
    alert("Please provide your weight!");
    document.myForm.weight.focus();
    return false;
  }

  if (document.myForm.height.value == "") {
    alert("Please provide your heught!");
    document.myForm.height.focus();
    return false;
  }
  calBMI();
}

function calBMI() {
  var weight = getElementById("weight").value;
  var height = getElementById("height").value;
  var bmi = weight / (height * height);

  document.getElementById("bmi").innerHTML = bmi;
}

<body>
  <form name="myForm">

    <label>weight</label>
    <input type="text" name="weight" id="weight">

    <label>height</label>
    <input type="text" name="height" id="height">

    <input type="text" readonly="readonly" id="bmi">

    <input type="submit" value="Submit" onclick="validate() calBMI()">
  </form>

</body>

You've got a couple problems here; when using `on*` attributes, you should use `return fn();` syntax to ensure the return value of the function is returned to the event handler. You need a semicolon to separate two different function calls. Also, since it's a submit button, you have to stop the form from submitting. See the duplicate. — Heretic Monkey, Nov 15 '21 at 14:55
Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Heretic Monkey, Nov 15 '21 at 14:56
The `.value` property always returns a string. `weight / (height * height)` will work but only because JS will implicitly convert them into numbers. You shouldn't rely on implicit type conversions like that - unless you know exactly what you're doing and what the browser/JS engine does. — Andreas, Nov 15 '21 at 14:57

score 1 · Accepted Answer · answered Nov 15 '21 at 15:25

function validate() {
  var height = document.getElementById("height").value;
  var weight = document.getElementById("weight").value;
  
  if (height == "" || height == 0) {
    document.getElementById("result").innerHTML = "Please enter a valid height";
    return;
  }
  
  if (weight == "" || weight == 0) {
    document.getElementById("result").innerHTML = "Please enter a valid weight";
    return;
  }
  calBMI();
}

function calBMI() {
  var weight = document.getElementById("weight").value;
  var height = document.getElementById("height").value;
  var bmi = weight / (height * height);

  document.getElementById("result").innerHTML = `BMI: ${bmi}`;
}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div>Weight</div>
  <input type="number" id="weight">
  <div>Height</div>
  <input type="number" id="height">
  <input type="submit" value="Submit" onclick="validate()">
  <div id="result"></div>
</body>
</html>

score 0 · Answer 2 · answered Nov 15 '21 at 15:22

Add proper functions to calculate bmi. No need to call calculatebmi on submit.

var form = document.getElementsByName('myForm')[0];
form.addEventListener('submit', validate);

function validate(e) {
  e.preventDefault();
  if (document.myForm.weight.value == "") {
    alert("Please provide your weight!");
    document.myForm.weight.focus();
    return false;
  }

  if (document.myForm.height.value == "") {
    alert("Please provide your heught!");
    document.myForm.height.focus();
    return false;
  }
  var weight = document.myForm.weight.value;
  var height = document.myForm.height.value;
  calBMI(weight, height);
  return true;
}

function calBMI(w, h) {
  var bmi = Math.ceil((w / Math.pow(h, 2)) * 703);
  document.getElementById("bmi").setAttribute('value', bmi);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <form name="myForm">

    <label>weight</label>
    <input type="text" name="weight" id="weight">

    <label>height</label>
    <input type="text" name="height" id="height">

    <input type="text" readonly="readonly" id="bmi">

    <input type="submit" value="Submit" onclick="validate();">
  </form>

</body>

</html>

Validation & Calculate BMI

2 Answers2