Simple Form Submit button with Small Javascript Code - not working?

Question

I am creating a web page in HTML which contains javascript and a small form with a submit button which calls the function of the whole javascript code.

This should work as a BMR + Maintenance Calorie Calculator. Using formulas shown on:

Male Metric BMR=66+(13.7 x weight in kilos)+(5 x height in cm)-(6.8 x age in years)

Female Metric BMR=655+(9.6 x weight in kilos)+(1.8 x height in cm)-(4.7 x age in years)

To then discovers ones Daily Maintenance Calorie Requirements (to stay the same weight), there are multipliers depending on activity level. It was when creating these IF statements that I started having these problems.

The issue: When I click submit, nothing happens. It used to send the user to a new page where it displayed the document.write text, however now, it does nothing.

I assume this is a fairly simple issue to solve but i'm new to javascript so any help would be appreciated, many thanks!

<html>
<head>
<title>BMR Calculator</title>
</head>
<body>

<h1> BMR Calculator and Daily Maintenance Calorie Calculator </h1>

<script type="text/javascript" language="javascript">

function Calculate() {

    var gender = document.getElementById("gender").value;
    var weight = document.getElementById("weight").value;
    var height = document.getElementById("height").value;
    var age = document.getElementById("age").value;
    var result = document.getElementById("result").value;
    var MaintenanceCalories = document.getElementById("MaintenanceCalories").value;
    var activitylevel = document.getElementById("activitylevel").value;


    if(gender=="male") 
    //English-BMR = 66 + ( 6.23 x weight in pounds ) + ( 12.7 x height in inches ) - ( 6.8 x age in year )
    //Metric-BMR = 66 + ( 13.7 x weight in kilos ) + ( 5 x height in cm ) - ( 6.8 x age in years )
        {
            val1 = 13.7 * weight;
            val2 = 5 * height;
            val3 = 6.8 * age;
            result = 66 + val1 + val2 - val3;
            val4 = activitylevel;
        }

    else if (gender=="female")
    //English-Women: BMR = 655 + ( 4.35 x weight in pounds ) + ( 4.7 x height in inches ) - ( 4.7 x age in years)
    //Women: BMR = 655 + ( 9.6 x weight in kilos ) + ( 1.8 x height in cm ) - ( 4.7 x age in years )
        {
            val1 = 9.6 * weight;
            val2 = 1.8 * height;
            val3 = 4.7 * age;
            result = 655 + val1 + val2 - val3;
            val4 = activitylevel;
        }

    if(val4=="l")
    {
        MaintenanceCalories = result * 1.2;
    }

    if(val4=="lm")
    {
        MaintenanceCalories = result * 1.375;
    }

    if(val4=="m")
    {
        MaintenanceCalories = result * 1.55;
    }

    if(val4=="mh")
    {
        MaintenanceCalories = result * 1.725;
    }

    else if(val4=="h")
    {
        MaintenanceCalories = result * 1.9;
    }

    document.write ('Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));


}
</script>


<form action="#">
    Gender  : <select id="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        </select><br/>
    Weight (kg.)   : <input type="text" id="weight" /><br />
    Height (cm): <input type="text" id="height" /><br />
    Age     : <input type="text" id="age" /><br />
    Current Activity Level: <select id="activitylevel">
        <option value="l">Sedentary (Little or No Exercise)</option>
        <option value="lm">Lightly Active (Light Exercise/Sports 1-3 Days Per Week)</option>
        <option value="m">Moderately Active (Moderate Exercise/Sports 3-5 Days Per Week)</option>
        <option value="mh">Very Active (Hard Exercise/Sports 6-7 days Per Week)</option>
        <option value="h">Extra Active (Very Intense Exercise/Sports and Physical Job Daily)</option>
    </select>
    </br>
    </br>

    </fieldset>
    <input type="button" value="Submit" onclick="Calculate()"/>
</form>

@ninaScholz sorry, just edited the post! The button does not do anything, it used to send the user to a new page and display the document.write text, but now it doesn't. Thanks — Tim Marsh
– Tim Marsh, Commented Feb 24, 2016 at 12:37
do you see any errors on your browsers developer tools console? — Jaromanda X
– Jaromanda X, Commented Feb 24, 2016 at 12:48
It used to send the user to a new page - not with document.write it didn't — Jaromanda X
– Jaromanda X, Commented Feb 24, 2016 at 12:49

zer00ne · Accepted Answer · 2016-02-24 13:30:13Z

Ok you had these problems:

These values should be parsed from text to number, when calculations for val1, val2, and val3 were being done, I didn't check if they were being converted implicitly. I just do this because it's better to be safe than sorry.

    var weight = parseFloat(document.getElementById("weight").value);
    var height = parseFloat(document.getElementById("height").value);
    var age = parseFloat(document.getElementById("age").value);

There were 2 vars that where being assigned to objects of elements that didn't exist. There were no elements with the id of result or MaintenanceCalories.

    var result = document.getElementById("result").value;
    var MaintenanceCalories = document.getElementById("MaintenanceCalories").value;

MaintenanceCalories is now initialized at 0.

There were 2 groups of variables that were not declared properly, they didn't have var. If you do that, then they are automatically global. Although in a small scale function, it isn't crucial, but it never hurts to use var.

        val1 = 13.7 * weight;
        val2 = 5 * height;
        val3 = 6.8 * age;
        result = 66 + val1 + val2 - val3;
        val4 = activity

The following is the snippet

Snippet

<!doctype html>
<html>
<head>
<title>BMR Calculator</title>
</head>
<body>

<h1> BMR Calculator and Daily Maintenance Calorie Calculator </h1>

<script>

function Calculate() {

    var gender = document.getElementById("gender").value;
    var weight = parseFloat(document.getElementById("weight").value);
    var height = parseFloat(document.getElementById("height").value);
    var age = parseFloat(document.getElementById("age").value);
    var activitylevel = document.getElementById("activitylevel").value;
		var MaintenanceCalories = 0;


    if(gender=="male") 
    //English-BMR = 66 + ( 6.23 x weight in pounds ) + ( 12.7 x height in inches ) - ( 6.8 x age in year )
    //Metric-BMR = 66 + ( 13.7 x weight in kilos ) + ( 5 x height in cm ) - ( 6.8 x age in years )
        {
            var val1 = 13.7 * weight;
            var val2 = 5 * height;
            var val3 = 6.8 * age;
            var result = 66 + val1 + val2 - val3;
            var val4 = activitylevel;
        }

    else if (gender=="female")
    //English-Women: BMR = 655 + ( 4.35 x weight in pounds ) + ( 4.7 x height in inches ) - ( 4.7 x age in years)
    //Women: BMR = 655 + ( 9.6 x weight in kilos ) + ( 1.8 x height in cm ) - ( 4.7 x age in years )
        {
            var val1 = 9.6 * weight;
            var val2 = 1.8 * height;
            var val3 = 4.7 * age;
            var result = 655 + val1 + val2 - val3;
            var val4 = activitylevel;
        }


   switch(val4) {
    	case "l":
      	MaintenanceCalories = result * 1.2;
				break;

      case "lm":
      	MaintenanceCalories = result * 1.375;
      	break;

   		case "m":
	      MaintenanceCalories = result * 1.55;
        break;

    	case"mh":
	       MaintenanceCalories = result * 1.725;
         break;
				 
			case "h":
 				MaintenanceCalories = result * 1.9;
        break;
				
			default: "m";
	 }

    document.write ('Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));

}
</script>


<form action="#">
  <fieldset>
    Gender  : <select id="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        </select><br/>
    Weight (kg.)   : <input type="text" id="weight" /><br />
    Height (cm): <input type="text" id="height" /><br />
    Age     : <input type="text" id="age" /><br />
    Current Activity Level: <select id="activitylevel">
        <option value="l">Sedentary (Little or No Exercise)</option>
        <option value="lm">Lightly Active (Light Exercise/Sports 1-3 Days Per Week)</option>
        <option value="m">Moderateley Active (Moderate Exercise/Sports 3-5 Days Per Week)</option>
        <option value="mh">Very Active (Hard Exercise/Sports 6-7 days Per Week)</option>
        <option value="h">Extra Active (Very Intense Exercise/Sports and Physical Job Daily)</option>
    </select>
    <br/>
    <br/>

    </fieldset>
    <input type="button" value="Submit" onclick="Calculate()"/>
</form>

Thank you, sir. I didn't notice that '+' until I had it linted, good eyes.

Vali S · Accepted Answer · 2016-02-24 13:10:55Z

1

Your problem is on the line

document.write ('Your BMR is: ' + result.toFixed(2)'. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));

where you are missing a +:

 document.write ('Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2));

Also, in your given example you are missing some html elements that are required in order to make you script work. #result and #MaintenanceCalories I added them like this, and it works just fine:

<div id="result"></div>
<div id="MaintenanceCalories"></div>

On the other hand it's also fine if you initialize these values with empty string (and no need to add the html tags any more):

var result = '';
var MaintenanceCalories = '';

Further more, in order to keep your form on the page, you could add a div after the closing tag of the form, where the results can be displayed:

<div id="results"></div>

and the JavaScript, at the end of Calculate() function:

results.innerHTML ='Your BMR is: ' + result.toFixed(2) + '. Your Maintenance Calories are: ' + MaintenanceCalories.toFixed(2);

edited Feb 24, 2016 at 13:10

answered Feb 24, 2016 at 12:41

Vali S

1,4612 gold badges10 silver badges18 bronze badges

3 Comments

Tim Marsh Over a year ago

Thanks for spotting that, i've made the change but still not working :/ i have updated the code on my post. Thanks!

Vali S Over a year ago

I suggest using the browser debugging tools: on Chrome CTRL+Shift+I, and your JavaScript errors would show on the upper-right corner of the console window. You click on it and it shows exactly what's wrong and where inside your script.

Tim Marsh Over a year ago

the div tags you suggested make it work perfectly, thank you very much for your help

Collectives™ on Stack Overflow

Simple Form Submit button with Small Javascript Code - not working?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related