使用隐藏表单将 javascript 变量传输到 php？答案

【问题标题】：Transfer javascript variable to php using hidden forms?使用隐藏表单将 javascript 变量传输到 php？
【发布时间】：2013-08-04 22:55:56
【问题描述】：

我的页面上有一个表格，要求用户输入他们的身高/体重，它会计算他们的 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 变量。我做错了什么？

【问题讨论】：

标签： php javascript sql forms web

【解决方案1】：

将隐藏输入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>

【讨论】：

【解决方案2】：

由于您没有在用户提交表单之前向他显示 bmi，因此请让自己的生活更轻松。使用 php 代码计算 bmi 而不是 javascript。

【讨论】：

必须这样做。我尝试了其他建议的答案，但没有奏效。

【解决方案3】：

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

在 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。

【讨论】：

【解决方案4】：

我已将您的代码简化为 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;
?>

【讨论】：