Transfer javascript variable to php using hidden forms?

Question

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?

Musa · Accepted Answer · 2013-08-04 23:01:26Z

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>

answered Aug 4, 2013 at 23:01

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Bracuk · Accepted Answer · 2013-08-04 23:55:00Z

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.

answered Aug 4, 2013 at 23:55

Dan Bracuk

20.8k5 gold badges30 silver badges44 bronze badges

1 Comment

Petefic Over a year ago

had to do this. I tried what other answers suggested but none worked.

vee · Accepted Answer · 2013-08-04 23:13:45Z

A few problems I see in your code:

In HTML you cannot have id and name attributes with spaces (http://www.w3.org/TR/html4/types.html#type-id)
You are calculating the bmi but aren't assigning it to the form element.
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.

Thelma Eckman · Accepted Answer · 2013-08-04 23:21:01Z

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

answered Aug 4, 2013 at 23:21

Thelma Eckman

531 silver badge4 bronze badges

Collectives™ on Stack Overflow

Transfer javascript variable to php using hidden forms?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related