Jump to content
kehwon

Form Calculation Help

Recommended Posts

I'm trying to create a form that allows for calculation of metabolic rate. 

There is an if,then statement related to gender (formula changes if female vs male)

I'd also like the result to be targeted to a specific part of the page (anchor). Ideally a new section can appear (maybe need to link a new page?) to provide further details

Below is my code, any help would be so appreciated!!

 

  <head>
   <style>

body {
      font:   15px gothic, sans-serif;
      letter-spacing: 1px;
      }
   input {
  width: 100%;
}
input[type=number] {
  border: none;
  border-bottom: 1px solid grey;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #ddcecb;
  border: none;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
  color: #95483e;
  padding: 16px 32px;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 4px 2px;

#submit:hover {
 border: none;
 background: #d2d1d1;
 box-shadow: 0px 0px 1px #777;
}}
input[type=text]:focus {
  border: 1px solid #555;
}
.form-inline label {
  margin: 5px 10px 5px 0;
}
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
</style>
  </head>

<form name="RMRcalc">
  weight (kg) :
  <input type="number" name="weight" autofocus><br><br>
  height (cm):
  <input type="number" name="height"> <br><br>
  age (years):
  <input type="number" name="age"> <br><br>
activity Level:
<select name="activity" margin=5px >
  <option value="1.2">sedentary (1-2x/week)</option>
  <option value="1.3">low (2-3x/week)</option>
  <option value="1.4">moderate (3-4x/week)</option>
  <option value="1.6">high (5+x/week)</option>
</select>
<br><br>
  female <input type="radio" name="gender" value="female" checked> 
<br> 
 male <input type="radio" name="gender" value="male">  <br>
<input type="submit" value="Calculate" id="calculate" onclick="RMRCalc ()" target="results">
<br><br>

    <script type="text/javascript">
    "use strict"
    function RMRCalc () {
    var weight = document.getElementById ("weight").value;
    var height = document.getElementById("height").value;
    var age = document.getElementById("age").value;
    var activity = document.getElementById("activity").value;
    if (gender="female") var RMR = (10*weight) + (6.25*height) - (5*age) -161;
    document.getElementById("RMR").innerHTML=RMR;
else var RMR = (10*weight) + (6.25*height) - (5*age) +5; document.getElementById("RMR").innerHTML=RMR;
    }
    </script>
</form>

<p><a name="results">
Your Daily Caloric Requirements:
<div id ="RMR"></div>

</a></p>
<br>

<p>
Did you know that 

Thank you!!

Share this post


Link to post
Share on other sites

You had a number of syntax errors in the CSS and JS you provided. 
I fixed them as best I could understand your logic and keeping most of your original code.
Of most important:
1) You cannot reference and ID without naming the ID in the element and
2) You cannot make a comparison (if...) with an assignment (=, should be ==)

Note that your calculation DO NOT take into account any of the activity selections.  Oversight?

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HTML5 Test Page </title>
<!-- From: http://w3schools.invisionzone.com/topic/59183-form-calculation-help/ -->
	<style>
body {
      font:   15px gothic, sans-serif;
      letter-spacing: 1px;
      }
input { width: 100%; }
input[type=number] {
  border: none;
  border-bottom: 1px solid grey;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #ddcecb;
  border: none;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
  color: #95483e;
  padding: 16px 32px;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 4px 2px;
	#submit:hover {
 border: none;
 background: #d2d1d1;
 box-shadow: 0px 0px 1px #777;
}
input[type=text]:focus { border: 1px solid #555; }
.form-inline label { margin: 5px 10px 5px 0; }
	@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
	</head>
<body>
	<form name="RMRcalc" action="javascript:alert('Success')" method="post">
  weight (kg) :   <input type="number" name="weight" id="weight" autofocus><br><br>
  height (cm):    <input type="number" name="height" id="height" > <br><br>
  age (years):    <input type="number" name="age" id="age" > <br><br>
	activity Level:
<select name="activity" id="activity">
  <option value="1.2">sedentary (1-2x/week)</option>
  <option value="1.3">low (2-3x/week)</option>
  <option value="1.4">moderate (3-4x/week)</option>
  <option value="1.6">high (5+x/week)</option>
</select>
<br><br>  female <input type="radio" name="gender" value="female" checked>
    <br>  male <input type="radio" name="gender" value="male">
	<br> <input type="submit" value="Calculate" id="calculate" onclick="return RMRCalc()" target="results">
<br><br>
	</form>
	<p><a name="results">
Your Daily Caloric Requirements:
<div id ="RMR"></div>
	</a></p>
<br>
	<p>
Did you know that
	<script>
"use strict"
function RMRCalc () {
  var weight = document.getElementById ("weight").value;
  var height = document.getElementById("height").value;
  var age = document.getElementById("age").value;
  var activity = document.getElementById("activity").value;
  var RMR;
  if (document.RMRcalc.gender.value == "female") { RMR = (10*weight) + (6.25*height) - (5*age) -161; }
                                            else { RMR = (10*weight) + (6.25*height) - (5*age) +5; }
  document.getElementById("RMR").innerHTML=RMR;
  return false;
}
</script>
</body>
</html>

Modify as necessary.  Good Luck! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...