Member Avatar for funkyash34

Hi Guys I have the following code for html and php. when i click on the button to calculate bmi it doesnt work.... can someone please help it is urgent...

Heres html code:

<html>
<head>
<script type="text/javascript">
function Calculate(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","bmi.php?q="+str,true);
xmlhttp.send();
}

</script>
</head>

<body>
<form onsubmit="Calculate(str); return false;">
<h1> Body Mass Index Ajax applicaiton </h1>
<p>Weight (kg): <input id="weight" type="text" /><br /></p>
<p>Height (m): <input id="height" type="text" /><br /></p>
<input type="submit" value="Calculate Body Mass" />
</form>
<br /><br />
<p>Your BMI is: <span id="bmi"></span></p>
</body>

php code:

<?php
$height = $_GET[‘height’];
$weight = $_GET[‘weight’];
$bmi = $weight / ($height * $height);
echo $bmi;
?>
  • 4 Contributors
  • 7 Replies
  • 762 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by junior siregar
Pnorq commented: This smells like a homework assignment. The AJAX code was simply copied from the w3schools site without modification. Lazy. +0

Recommended Answers

All 7 Replies

Member Avatar for Airshow

Funkyash,

You have created am HTML element with id="bmi" to receive the calculated value.

The javascript attempts to put the calculated value into an element with id="txtHint", which doesn't exist.

As there's no safety in the code, a javascript error will be thrown.

Airshow

Member Avatar for funkyash34

Airshow,
thank you for ur reply I have changed the HTML element id to="cal" but still it doesn't work, do u know if the php code is right or not?

<html>
<head>
<script type="text/javascript">
function Calculate()
{
if (str.length==0)
  { 
  document.getElementById("cal").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("cal").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","bmi.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form onsubmit="Calculate(); return false;">
<div id="cal"><h1> Body Mass Index Ajax applicaiton</h1></div>
<p>Weight (kg): <input id="weight" type="text" /><br /></p>
<p>Height (m): <input id="height" type="text" /><br /></p>
<input type="submit" value="Calculate Body Mass" /></form></br>
<p>Your BMI is: <span id="cal"></span></p>
</body>
</html>
Member Avatar for Airshow

Funkyash,

You've now got two elements with id="cal", which isn't a good idea.

To find out if the response from bmi.php is returned ok, put alert(xmlhttp.responseText); before document.getElementById("cal").innerHTML = xmlhttp.responseText; .

Airshow

Member Avatar for funkyash34

Airshow,

I have made the alert change and the id element, which u recommended but still its not working :-(

Member Avatar for funkyash34

its working now :-)

Member Avatar for thegerm

Funkyash, could you post the working code or explain what you did to get it working. I'm trying to do something very similar,
Thanks,
thegerm

Member Avatar for junior siregar

Hi all..
I got homework problem that is very similar like you did.
guys.. may I have the right and complete code !
you can also send the code to my email address
juniorfor7@gmail.com

thanks,
my regards
-JR-

Edited by junior siregar because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.