简体   繁体   English

如何将JavaScript值存储到mysql数据库中?

[英]How to store javascript values into mysql database?

I'm trying to store the users BMI score and comments into mysql database. 我正在尝试将用户的BMI分数和注释存储到mysql数据库中。 I'm able to store their height and weight but just not their score and bmi comment. 我能够存储他们的身高和体重,但不能存储他们的分数和bmi评论。 Any suggestions would be appreciated. 任何建议,将不胜感激。

<script type="text/javascript">
    function Calculate()
    {
        //Obtain user inputs
        var height=Number(document.getElementById("height").value);
        var heightunits=document.getElementById("heightunits").value;
        var weight=Number(document.getElementById("weight").value);
        var weightunits=document.getElementById("weightunits").value;


       //Convert all units to metric
       if (heightunits=="inches") height/=39.3700787;
       if (weightunits=="lb") weight/=2.20462;
       if (heightunits=="cm") height/=100;

      //Perform calculation
      var BMI=weight/Math.pow(height,2);

      //Display result of calculation
      document.getElementById("output").innerText=Math.round(BMI*100)/100;

      var output =  Math.round(BMI*100)/100
       if (output<18.5)
       document.getElementById("comment").innerText = "Underweight";
       else   if (output>=18.5 && output<=25)
       document.getElementById("comment").innerText = "Normal";
       else   if (output>=25 && output<=30)
       document.getElementById("comment").innerText = "Obese";
       else   if (output>30)
       document.getElementById("comment").innerText = "Overweight";
      // document.getElementById("answer").value = output; 
    }
</script>
 </head>
 <body>

<div>BMI Calculator</div>

<input type="button" value="Calculate" onclick="Calculate(this.form);">
<input type="submit" name="savebmi" value="SaveBMI">

<p class="font-3">Your BMI is: <span name="output" value="output" type="float"     id="output" class="textInput"></span></p>

<p class="font-3">This means you are: <span name="comment" type="text"     id="comment"></span> </p>

Elements with id output and comment are not input elements but span , so they are not passed to the PHP script. 具有id 输出注释的元素不是input元素,而是span ,因此它们不会传递到PHP脚本。 You should try to pass this via AJAX to your script, then you can add these values to the request. 您应该尝试通过AJAX将其传递给脚本,然后可以将这些值添加到请求中。 Example: 例:

var req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // Whatever you want to do with the php response
    }
}
req.open("POST", "script.php", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send("output=" + output + "&weight=" + weight + ...);

Another workaround is to use hidden input elements, but then you should make a function to validate these or make it non-editable. 另一个解决方法是使用隐藏的input元素,但是您应该创建一个函数来验证这些元素或使其不可编辑。

One thing you could do is change your span tags to input tags and then just change your JavaScript to set the value attribute instead of the innerText . 您可以做的一件事是将span标记更改为input标记,然后只需更改JavaScript即可设置value属性而不是innerText Then when you submit the form, it will pass those values to your PHP script. 然后,当您提交表单时,它将把这些值传递给您的PHP脚本。

You can always style your input boxes to match your paragraph text if don't like the appearance of boxes. 如果您不喜欢框的外观,则可以始终为输入框设置样式以匹配您的段落文本。 For example, start with style='border:none . 例如,从style='border:none

JavaScript JavaScript的

  //Display result of calculation
  document.getElementById("output").value=Math.round(BMI*100)/100;

  var output =  Math.round(BMI*100)/100
   if (output<18.5)
   document.getElementById("comment").value = "Underweight";
   else   if (output>=18.5 && output<=25)
   document.getElementById("comment").value = "Normal";
   else   if (output>=25 && output<=30)
   document.getElementById("comment").value = "Obese";
   else   if (output>30)
   document.getElementById("comment").value = "Overweight";
  // document.getElementById("answer").value = output; 

HTML HTML

<p class="font-3">Your BMI is: <input name="output" type="float" id="output" class="textInput" style="border:none" /></p>

<p class="font-3">This means you are: <input name="comment" type="text" id="comment" style="border:none" /></p>

Here is a solution to fit your question.. 这是适合您问题的解决方案。

//Display result of calculation
var bmi_result = Math.round(BMI*100)/100;

document.getElementById("output").innerText=bmi_result;
document.getElementById("form_output").innerText=bmi_result;

var comment = '';
if (bmi_result<18.5) {
   comment  = "Underweight";
} else   if (bmi_result>=18.5 && output<=25) {
   comment  = "Normal";
} else   if (bmi_result>=25 && output<=30) {
   comment  = "Obese";
} else   if (bmi_result>30) {
   comment  = "Overweight";
}

document.getElementById("comment").innerText = comment;
document.getElementById("form_comment").innerText = comment;

In your form: 以您的形式:

<input type="hidden" id="form_output" name="output" value="">
<input type="hidden" id="form_comment" name="comment" value="">
<input type="button" value="Calculate" onclick="Calculate(this.form);">

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM