php - ajaxがDOMにコンテンツをロードしない

Question

html に「tempDiv」を設定する代わりに、print.php が読み込まれ、コンテンツが表示されます。同じコードが他のファイルや JavaScript 関数でも機能しています。:/

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>

viewall() 関数:

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;
    }
  }

}

選択した列を印刷するために呼び出される printDiv() 関数:

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>";

                }                           



?>

送信ボタンをクリックした結果