0

I have a form on my page that asks users to enter in their height/weight and it calculates their BMI and stores it in a database. I am hung up on how I transfer the javascript variable to a php variable. I understand I have to use hidden forms but I can't seem to figure out how they work.

here is my code

<?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 is just where I do my connect to the sql server and select the database stuff

The javascript bmi variable does not seem to be transferring to the php $bmi variable. What is it I am doing wrong?

4

4 回答 4

2

Set the value of the hidden input bmi to the calculated value.

<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>
于 2013-08-04T23:01:26.700 回答
1

A few problems I see in your code:

  1. In HTML you cannot have id and name attributes with spaces (http://www.w3.org/TR/html4/types.html#type-id)
  2. You are calculating the bmi but aren't assigning it to the form element.
  3. You are missing closing brace on the javascript calc() function.

The solution would be to fix the id attribute first, for e.g you could use camel case notation like follows: 

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

Update the javascript like follows:

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));
}

Another point to note is that you are using mysql_ extensions which are deprecated. You want to start using mysqli or PDO instead.

于 2013-08-04T23:07:40.303 回答
1

Since you are not displaying the bmi to the user before he submits the form, make life easy for yourself. Use php code to calculate the bmi instead of javascript.

于 2013-08-04T23:55:00.063 回答
0

I have simplified your code to 3 parts for better understanding, hopefully:

HTML: I'm using GET method instead of POST to see the variable on the URL. Please also not that input does not have close bracket </input>

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

JavaScript: window.location.href tells the browser to show the variable on the URL

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

PHP: Now you can retrieve the variable by using $_GET['height']

<?php
    $height = $_GET['height'];
    echo $height;
?>
于 2013-08-04T23:21:01.407 回答