unable to load database value in php in ajax

Question

I am entry level developer in PHP and have no knowledge in PHP, i am trying to call database values on selecting a drop down menu, have done this so far with the help of tutorial,.. the problem is when i select 1st drop down the second drop down is getting values from DB, but when i select option from 2nd drop down menu, i am not getting any data displayed on page. Nothing Happens after selecting an option from 2nd drop down.

<?php
include '../connect.php';
 $unm=htmlentities($_SESSION['username']);
?>

<html>
<head>
<title> User Panel</title></head>

<body background="../image/pencilback.jpg">
<div id="welcome"><?php
echo '<align="right">'.'<h3>'."Welcome ".$unm.'</h3>';
?></div>

<link rel="stylesheet" type="text/css" href="../css/heading.css">
<table border="0" width="50%" height="150px" align="center" >
<tr width="100%" height="200px" > <td colspan="3"> <img src="../image/banner.jpg"> </td>  </tr>
</table>

<table id="tableborder" border="0" width="83%" height="40px" align="center" bgcolor="#BDBDBD" >

<td align="center"><a href="userpanel.php"><b> Take a Test</b></a> </td> 
<td align="center"><a href="myaccount.php"><b> My Account Details</b> </td>
<td align="center"><a href="testhistory.php"><b> View Test History </b> </td> 
<td align="center"><a href="feedback.php"><b> Give Feedback</b> </td>
<td align="center"><a href="../logout.php"><b> Logout</b> </td> </td>  </tr>
</table>
<form method="POST" action="">
 <div id="viewset"><center>
  Select Desired Test </center> <br></div><br><br><br><br><br><br>
 <table border="1px" align="center" cellspacing="10px" cellpadding="10px">
 <tr> <td> <select name="tstcat" id="countrydd" onChange="change_country()">
<option> Select Test Category</option>
<?php
$res=mysqli_query($connection,"select * from sub");
while($row=mysqli_fetch_array($res))
{
    ?>
    <option value="<?php echo $row["subname"]; ?>"> <?php echo $row["subname"]; ?> </option>
<?php
    }
?>

</select>
</td>
<td>
 <div id="state" align="center">
<select id="details" onChange="display_details()">
<option>Select Test</option>
</select>

</div>
 </tr> </td></table>
<br>

<div id="display">
<table border="1px" height="100px" width="30%" align="center">
<tr style=color:maroon> <th> Test Name </th> <th> No. of Questions </th> <th> Duration </th> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
</table>

</div>

<center> <input type="submit" name="submit" value="Go"></center>

<?php
if(isset($_POST['submit']))
{
$tstct=$_POST['tstcat'];
$tnm=$_POST['testid'];
$_SESSION['testname']=$tnm;
$_SESSION['testcatg']=$tsc;
header('location:teststart.php');
}
?>

 </div>
 </form>



 <script type="text/javascript">

 //========== FOR DROPDOWN SELECTION

 function change_country()
 {
     var xmlhttp=new XMLHttpRequest();
     xmlhttp.open("GET","ajax.php?category="+document.getElementById("countrydd").value,false);
     xmlhttp.send(null);
     document.getElementById("state").innerHTML=xmlhttp.responseText;

 }

  //========== TO LOAD TEST DETAILS

 function display_details()
 {
     var xmlhttp=new XMLHttpRequest();
     xmlhttp.open("GET","ajax2.php?testname="+document.getElementById("details").value,false);
     xmlhttp.send(null);
     document.getElementById("display").innerHTML=xmlhttp.responseText;

 }

 </script>

  </body>
 </html>

AJAX.PHP

<?php
include '../connect.php';
$category=$_GET["category"];

if($category!="")
{
$res=mysqli_query($connection,"select * from test_detail where     test_category='$category'");
echo "<select name='testid' onchange='change_test()'>";
while($row=mysqli_fetch_array($res))
{
    ?>
    <option value="<?php echo $row["test_name"];?>"> <?php echo $row["test_name"];?>  </option>
    <?php
}
echo "</select>";
}
?>

AJAX 2.PHP

<?php
include '../connect.php';
$tstname=$_GET["testname"];

if($tstname!="")
{
$res1=mysqli_query($connection,"select * from test_detail where  test_name='$tstname'");
echo "<table>";
while($row1=mysqli_fetch_array($res1))
{
    ?>

    <tr> <td> <?php echo $row1["test_name"];?>  </td> 
    <td> <?php echo $row1["total_ques"];?> </td> 
    <td> <?php echo $row1["test_dur"];?> </td> </tr>
    <?php
}
echo "</table>";
}
    ?>

you should be changing `details` to I think `testid` when pulling the data for the second dropdown, you're referring to an empty select options, and from your ajax.php you're loading options with a `testid` id for select. not really sure what you're doing — Roljhon, Apr 02 '17 at 18:38

score 0 · Accepted Answer · edited May 23 '17 at 12:17

I would recommend you to check three things.

in the select that is inside to the div with id #state, you have an onChange calling the javascript function 'display_details()' which you use to load the table element with detail data. But when you return the select from AJAX.PHP the onchange event has another function 'change_test()', it should be 'display_details()'
When you insert dynamically new html elements in a document, normally you have to use dynamic event binding to attach the event handlers. For this I recommend you to use jquery, this link explain how Event binding on dynamically created elements
to make to ajax request jquery is very good library, but if you want to use the XMLHttpRequest object , It will be a good idea check the status of the response:

if (xmlhttp.status == 200){ document.getElementById("state").innerHTML=xmlhttp.responseText; }else{ // Handle the error; }

Thank you for replying, i will try this out today and reply. :) — Sarfaraz Ansari, Apr 03 '17 at 09:12

unable to load database value in php in ajax

1 Answers1