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;
?>
Pnorq commented: This smells like a homework assignment. The AJAX code was simply copied from the w3schools site without modification. Lazy. +0

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

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>

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

Airshow,

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

its working now :-)

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

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-

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.