CODEWITHSUNDEEP
phpajax
JeNy
JeNy

Reputation: 85

PHP + AJAX code - Display data on selecting a value from a list

I'm trying to display data from database(MySQL) based on the option fields selected. I have two fields as shown below :

Select a Health Block : .......(list)
Select the year : .......(list)

When I select health block and year, data from database should be displayed on the same page itself. I've tried the following code. Actually the code works if I've only one option ('year') to be selected. What I need is to pass both the values (Health block and Year) to the page (getblock2.php) where I've written the code to retrieve data from database. Can anybody please help me to figure out where the problem is?

Mainpage

<html>
<head>
<script type="text/javascript">
var str11;
var str22;

function showB(str2)
{
    str22=str2;
}

function showBlock2(str)
{
showB();
str11=str;
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showB(this.value)">
<option value="1">H1</option>
<option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2(this.value)">
<option>2012</option>
<option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
                            </div>
</body>
</html>

getblock2.php

<?php
include("connect.php");
$q=$_GET["q"];
$h=$_GET['h'];
$q="select Total_Cases from epidemics where Year1=$q and Hid=$h";
$r=mysql_query($q);
$i=0;
while($row=mysql_fetch_row($r))
    {
    $i++;
    echo $i." ".$row[0]."<br/>";
    }
?>

Upvotes: 2

Views: 4384

Answers (2)

Saravanan
Saravanan

Reputation: 1889

Variable str22 is not being assigned when you call showBlock2() on changing year. So replace the line

showB();

with

showB(document.getElementsByName("h")[0].value);

This would work when you select health and then year, no need to call showB() on changing health list.

EDITED (Optimized Code):

The following code has been altered from your source.

Mainpage

<html>
<head>
<script type="text/javascript">
function showBlock2()
{
    var str11=document.getElementsByName("h")[0].value;
    var str22=document.getElementsByName("yr")[0].value;
    document.getElementById("txtHint").innerHTML="";
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
    xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
    xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showBlock2()">
    <option value="1">H1</option>
    <option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2()">
    <option>2012</option>
    <option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
</div>
</body>
</html>

Note that only function showBlock2() is used for onchange on both dropdowns, so the div txtHint is updated at each change. Also no parameters passed.

Upvotes: 1

M Shahzad Khan
M Shahzad Khan

Reputation: 935

Just remove 

showB()

It will work fine. As you have already values in both variables. Just showB() function is making the variable empty again.

Here is the optimized code. It can work in both cases, which ever select option you select first.

<script type="text/javascript">
var healthValue = "";
var yearValue = "";

function showB(str2)
{
  healthValue = str2;

if(yearValue != '')
{
    callAjax(); 
}
}

function showBlock2(str)
{
yearValue = str;

if(healthValue != '')
{
    callAjax(); 
}
 }


 function callAjax()
 {

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getblock2.php?q="+healthValue+"&h="+yearValue,true);
  xmlhttp.send();
 }
 </script>

Upvotes: 1

Related Questions