I'm very new to web design and I am struggling with storing a javascript variable in my database.
I have a simple page with an HTML form that has textboxes for height/weight/age/gender and a submit button that calls a javascript function that does some calculations to determine if the user is under or overweight and then returns how many calories they should consume a day to be the correct weight for their BMI.
Here is the javascript:
<script type="text/javascript">
function bmiCalc()
{
var height=document.getElementById('height box').value,
weight=document.getElementById('weight box').value;
weight/=2.2;
height/=39.37;
BMI=Math.round(weight/(height*height));
alert("Your BMI is :"+BMI);
}
function calorieIntake()
{
var height=document.getElementById('height box').value,
weight=document.getElementById('weight box').value,
age=document.getElementById('age box').value,
gender=document.getElementById('gender box').value;
if(gender=="male" || gender=="Male")
{
if(23<BMI && BMI<25)
{
calories=Math.round((66+(6.23*weight)+(12.7*height)-(6*age)));
alert("You are considered normal weight and should therefore consume: " +calories+" calories a day. This calorie intake will ensure that you remain the same weight");
}
else if(BMI<23)
{
calories=Math.round((66+(6.23*weight)+(12.7*height)-(6*age)+500));
alert("You are considered under-weight, and should therefore consume: " +calories+" calories a day. This calorie intake will cause you to gain one pound a week");
}
else if(BMI>25)
{
calories=Math.round((66+(6.23*weight)+(12.7*height)-(6*age)-500));
alert("You are considered over-weight and should therefore consume: " +calories+" calories a day. This calorie intake will cause you to lose one pound a week");
}
}
else if(gender=="female" || gender=="Female")
{
if(18.49<BMI && BMI<24.9)
{
calories=Math.round(655+(4.35*weight)+(4.7*height)-(4.7*age));
alert("You are considered normal weight and should therefore consume: "+calories+" calories a day. This calorie intake will ensure that you remain the same weight");
}
else if(BMI<18.49)
{
calories=Math.round((655+(4.35*weight)+(4.7*height)-(4.7*age)+500));
alert("You are considered under-weight, and should therefore consume: " +calories+" calories a day. This calorie intake will cause you to gain one pound a week");
}
else if(BMI>24.9)
{
calories=Math.round((655+(4.35*weight)+(4.7*height)-(4.7*age)-500));
alert("You are considered over-weight and should therefore consume: " +calories+" calories a day. This calorie intake will cause you to lose one pound a week");
}
}
}
</script>
and here is my form:
<form>
<p>Enter your height(in inches):</p><input type="text" id="height box">
<p>Enter your weight(in pounds):</p><input type="text" id="weight box">
<p>Enter your age(in years):</p><input type="text" id="age box">
<p>Enter your gender(male/female):</p><input type="text" id="gender box">
<input type="button" value="Your BMI:" id="button1" onClick="bmiCalc()">
</input>
<input type="button" value="Suggested Calorie Intake:" id="button2" onClick="calorieIntake()">
</input>
</form>
What I want to do is take the 'calories' variable and store it in my MySQL database. I understand I need to somehow pass the javascript variable to a php variable but I don't have any idea how to do that. What is the simplest way to go about doing this?