使用隐藏表单将javascript变量传输到php - Transfer javascript variable to php using hidden forms?

我的页面上有一个表格，要求用户输入他们的身高/体重，然后计算他们的BMI并将其存储在数据库中。我对如何将javascript变量转换为php变量感到困惑。我知道我必须使用隐藏的表格，但我似乎不知道它们是如何工作的。

这是我的代码

<?php include "base.php"; ?>
<?php session_start (); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<title>BMI</title>  
</head>
<body>
<form id="bmi" action="main.php" method="post">
<p>Enter your height(in inches):</p><input type="text" id="height box" name="height box">
<p>Enter your weight(in pounds):</p><input type="text" id="weight box" name="weight box">
<input type="hidden" id="bmi" name="bmi">
<input type="button" value="Calculate" id="calc button" name="calc button" onClick="calc()">
</input>
</form>
<script type="text/javascript">
function calc()
{
    // get variables from textboxes
    var height=document.getElementById('height box').value;
    var weight=document.getElementById('weight box').value;
    var bmi=document.getElementById('bmi').value;
    // calculate BMI
    weight/=2.2;
    height/=39.37;
    BMI=Math.round(weight/(height*height));
</script>
<?php
//insert username, date, and bmi into the db
$username = mysql_real_escape_string($_SESSION['Username']);
$date = date('Y-m-d');
$bmi = mysql_real_escape_string($_POST['bmi']);
mysql_query("INSERT INTO bmi (username, bmi, date) VALUES('".$username."', '".$bmi."', '".$date."')");
?>
</body>
</html>

base.php正是我连接到sql server并选择数据库内容的地方

javascript bmi变量似乎没有转移到php$bmi变量。我做错了什么？

将隐藏输入bmi的值设置为计算值。

<form id="bmi" action="main.php" method="post">
<p>Enter your height(in inches):</p><input type="text" id="height box" name="height box">
<p>Enter your weight(in pounds):</p><input type="text" id="weight box" name="weight box">
<input type="hidden" id="bmi" name="bmi">
<input type="submit" value="Calculate" id="calc button" name="calc button" onClick="calc()">
</form>
<script type="text/javascript">
function calc()
{
    // get variables from textboxes
    var height=document.getElementById('height box').value;
    var weight=document.getElementById('weight box').value;
    var bmi=document.getElementById('bmi').value;
    // calculate BMI
    weight/=2.2;
    height/=39.37;
    document.getElementById('bmi').value=Math.round(weight/(height*height));
}
</script>

因为在用户提交表单之前，您不会向他显示bmi，所以让自己的生活变得轻松。使用php代码来计算bmi，而不是javascript。

我在您的代码中看到的一些问题：

在HTML中，不能有带空格的id和name属性(http://www.w3.org/TR/html4/types.html#type-id）
您正在计算bmi，但没有将其分配给表单元素
javascript calc()函数缺少右大括号

解决方案是首先修复id属性，例如，您可以使用如下骆驼大小写表示法：

<form id="bmi" action="main.php" method="post">
<p>Enter your height(in inches):</p><input type="text" id="heightBox" name="heightBox">
<p>Enter your weight(in pounds):</p><input type="text" id="weightBox" name="weightBox">
<input type="hidden" id="bmi" name="bmi">
<input type="submit" value="Calculate" id="calcButton" name="calcButton" onClick="calc()">
</form>

更新javascript如下：

function calc()
{
    // get variables from textboxes
    var height=document.getElementById('heightBox').value;
    var weight=document.getElementById('weightBox').value;
    var bmi=document.getElementById('bmi');
    // calculate BMI
    weight/=2.2;
    height/=39.37;
    bmi.value=Math.round(weight/(height*height));
}

需要注意的另一点是，您使用的是不推荐使用的mysql_扩展。您希望开始使用mysqli或PDO。

为了更好地理解，我已经将您的代码简化为3部分：

HTML:我使用GET方法而不是POST来查看URL上的变量。还请注意，input没有闭合括号</input>

<form action="index.php" method="GET">
    <input type="text" name="height">
    <input type="submit" onclick="calc();">
</form>

JavaScript:window.location.href告诉浏览器在URL 上显示变量

function calc(){
    var height = document.getElementById('height').value;
    window.location.href = "index.php?height=" + height; 
}
</script>

PHP:现在您可以使用$_GET['height']检索变量

<?php
    $height = $_GET['height'];
    echo $height;
?>