My aim is to use AJAX to display php search results without having to reload the page. So far I have been able to get the results, (I'm new to ajax, and I do not know jQuery), currently my only problem is that the search results which I am displaying in a html table appear at the top the page above everything, not in the specified div. I have used the innerHTML to try and display it correctly.
Here is my main code:
function searchResults(title) {
if (title == "") {
document.getElementById("response").innerHTML="";
}
var request= new XMLHttpRequest();
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
var displayDiv= document.getElementById("response");
displayDiv.innerHTML=request.responseText;
}
}
request.open("GET", "functions.php?titleA="+title, true);
request.send();
document.getElementsById("response").innerHTML="fuck";
}
</script>
<title>Anime Search</title>
</head>
<body>
<div class="main">
<div class= "header">
<h1>Search your Database</h1>
</div> <!-- close header -->
<div class= "searchA">
<p>Search your Anime database below</p>
<form onSubmit="searchResults(titleA)">
<label>Title</label><input type="text" name="titleA" placeholder="enter title"/>
<input type="submit" value="submit"/>
</form>
<div id="response">
</div> <!-- close response -->
</div> <!-- close searchA -->
and here is the php:
if (isset($_GET["titleA"])) {
$title= $_GET["titleA"];
$connection= connect();
$username= $_SESSION["username"];
$tableA= $username . "_Anime";
$queryA= "SELECT * FROM Anime." . "`$tableA` WHERE Title LIKE '%$title%'";
$resultA= mysqli_query($connection, $queryA);
if ($resultA == false) {
die("no results found");
}
$numRows= mysqli_num_rows($resultA);
echo "<table class= 'tSearch'>
<thead>
<th>Title</th>
<th>Alt Title</th>
<th>Seasons</th>
<th>Episodes</th>
<th>OVA's</th>
<th>Movies</th>
<th>Status</th>
<th>Downloaded</th>
</thead>
<tbody>";
while($row= mysqli_fetch_array($resultA, MYSQLI_BOTH)) {
echo "<tr>";
echo "<td>" . $row["Title"] . "</td>";
echo "<td>" . $row["Alt_Title"] . "</td>";
echo "<td>" . $row["Seasons"] . "</td>";
echo "<td>" . $row["Total_Episodes"] . "</td>";
echo "<td>" . $row["OVAS"] . "</td>";
echo "<td>" . $row["Movies"] . "</td>";
echo "<td>" . $row["Status"] . "</td>";
echo "<td>" . $row["Downloaded"] . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
mysqli_close($connection);
if ($resultA == false) {
echo mysqli_error($connection);
}
}
I have of course spend many hours trying to find out whats wrong, I do plan on learning jQuery, but for now I just really want to get this to work, so please do not tell me to use jQuery,
EDIT: link to a screenshot: http://i.imgur.com/EJKhaTi.png My browser is Safari 7.0.4, i tried firefox and got the same problem Thank in advance, Rainy