使用隐藏表单将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;
?>
相关文章:
- 将函数的上下文应用于javascript变量
- 无法导出函数expressjs/requestjs中的变量
- 通过AJAX传输变量
- 如何用javascript将变量传输到外部js文件
- 如何在没有web服务器的情况下将变量数据从Python传输到Javascript
- 将javascript变量传输到插件函数(异步URL)
- 如何在节点快速路由器中沿承诺链向下“传输”变量
- 使用 Cookie 传输数值变量
- Web App - 将 Javascript 变量传输到 MySQL (JAVA)
- 将内联硬编码的 jQuery 函数传输到变量
- ASP.NET从Crystal Report获取变量,但未正确传输到外部应用程序
- 使用隐藏表单将javascript变量传输到php
- 通过链接传输变量,并在新页面中使用它们(JavaScript)
- 将javascript变量传输到Objective C (IOS)
- 如何将JavaScript变量传输到PHP
- 创建jQuery数组变量和传输数组到另一个页面PHP
- 如何使用jsp变量传输onclick并直接到其他页面
- Rails 3和jQuery-如何将ruby变量传输到javascript
- 将javascript变量从客户端传输到服务器
- 将javascript变量传输到同一页面上的php,而无需提交