将javascript变量存储在mysql数据库中

Question

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?

Answer 1

There are 2 ways you can go about achieving this.

Option 1 : Use hidden form fields, and set their values through JS before/while submitting the form. This is easier to achieve, but leaves a bunch of security gaps open. This should not be used to send out sensitive data, but may be used if the inputs are sanitized properly via Prepared Statements, or mysqli_real_escape_string .

Option 2 : Use AJAX to send the data. AJAX gives you much more in the way of options and data handling. AJAX can be used to send out sensitive data, but you would still need to sanitize on the server side.

Answer 2

I would look into using AJAX. It is not a library or something you have to download, it is just a method of sending and receiving information from JavaScript to the server.

Answer 3

You need to initiate an AJAX call to a php page that accepts the value and stores it in your database. In vanilla javascript, the first half of that could look something like this:

var xhr = new XMLHttpRequest();
xhr.open("get","/path/to/php/page.php?bmi=calculated_bmi");
xhr.send();

Then your PHP page would take the variable ( $_GET['bmi'] ) and pass it to MySQL.