ajax not loading content in DOM - php

Question

instead of populating the "tempDiv" in html, the print.php is loaded showing the content. The same code is working for other files and javascript functions. :/
HTML:
<li><a class="button black" href="#searchbox" onclick="viewall()" >View All</a></li>
<li><button class="button black" type="submit" form="selectcol" onclick="printDiv()"></button></li>
<div id="searchresults" style="padding-top:30px; padding-bottom:10px; max-height:280px; ">
The results will show up here..!!
</div>
<div id="tempDiv"></div>
The viewall() function :
function viewall(){
var xmlhttp;
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("searchresults").innerHTML=xmlhttp.responseText;
}
}*/
xmlhttp.open("POST", "viewall.php", true); // set the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // adds a header to tell the PHP script to recognize the data as is sent via POST
xmlhttp.send(); // calls the send() method with datas as parameter
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
}
}
}
The printDiv() function called to print the selected columns:
function printDiv()
{
var xmlhttp;
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("searchresults").innerHTML=xmlhttp.responseText;
}
}*/
xmlhttp.open("POST", "print.php", true); // set the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // adds a header to tell the PHP script to recognize the data as is sent via POST
xmlhttp.send(); // calls the send() method with datas as parameter
// Check request status
// If the response is received completely, will be transferred to the HTML tag with tagID
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("tempDiv").innerHTML = xmlhttp.responseText;
}
}
}
PHP :
<?php
$col = $_POST['print'];
$flds = "";
foreach($col as $value){
if(isset($col)){
if($flds !="")
$flds .= ",";
$flds .= $value;
}
}
$sql = "SELECT ". $flds." from student";
$con = mysqli_connect("localhost", "root", "","university") or die("could not connect". mysqli_error($con));
$rs = mysqli_query($con, $sql);
echo "<table border='1'";
while($r = mysql_fetch_array($rs)){
echo "<tr>";
echo "<td class='searchtabledata'>".$r[0]."</td>";
echo "<td class='searchtabledata'>".$r[1]."</td>";
echo "</tr>";
}
?>
the result i get on clicking the submit button

Answer 1

Shouldn't you define the readystate function before sending the request?
part 2. It looks like your printdiv function submits a form. You should be able to remove the form tags if you are using a strictly AJAX procedure. You'll need to adjust a few other things to make that work.