AJAX issues when trying to print out MySQL Query - php

Question

I'm currently learning AJAX and I've run into this error in which results from MySQL query is not being displayed.
The following snippet is of the javascript :
<script type="text/javascript">
function showCustomers()
{
var zip = document.getElementById('zipcode').value;
var st = document.getElementById('stname').value;
if ((zip=="")&&(st=="")){
document.getElementById("showCustResults").innerHTML="";
return;
}
mlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("showCustResults").innerHTML=xmlhttp.responseText;
}
}
var querystring = "?zip" + zip + "&st" + st ;
xmlhttp.open("POST","findCustomers.php" + querystring, true);
xmlhttp.send();
}
The following is the form in which the information is being pulled from :
<form id="search_customers" class="appnitro" method="post" action="">
<ul>
<li id="li_2" >
<label class="description" for="zipcode">Zip Code </label>
<div><input id="zipcode" name="zip_code" class="element text small" type="text" maxlength="10" value=""/> </div>
<p class="guidelines" id="guide_2"><small>Please enter a Zip Code</small></p>
</li>
<li id="li_1" >
<label class="description" for="stname">Street Name </label>
<div><input id="stname" name="st_name" class="element text medium" type="text" maxlength="50" value=""/></div>
<p class="guidelines" id="guide_1"><small>Please Enter the Street Name</small></p>
</li>
<li class="buttons">
<input id="findCust" class="button_text" onclick="showCustomers()" type="submit" name="find"/>
</li>
</ul>
</form>
<div id="showCustResults"><!-- Eventually search results will appear here --></div>
And the PHP that is pulling the cod is the following:
<?php
include 'functions.php'; #Library that holds all the functions
#Sanitizing strings for SQL entry
$zip = mysqli_real_escape_string($db, $_POST['zip']);
$st = mysqli_real_escape_string($db, $_POST['st']);
$db = db_connect(); #Connecting to the database
#Querying the database to find any matches
#ALSO: We might need to add another column to
$sql = "SELECT CustomerName, ServiceAddress, BillingAddress FROM enrollment_users WHERE UserName = '$username' AND Password = '$password'";
$res = mysqli_query($db, $sql);
#Creating the table to shoot out the information
#First the header...
echo "<table border='1'>";
echo " <tr>";
echo " <th>Customer</th>";
echo " <th>Address 1</th>";
echo " <th>Address 2</th>";
echo " <th>Status</th>";
echo " </tr>";
#Now the actualy information
while($row = mysqli_fetch_assoc($res)){
echo " <tr>";
echo " <td>" . $row['CustomerName'] . "</td>";
echo " <td>" . $row['ServiceAddress'] . "</td>";
echo " <td>" . $row['BillingAddress'] . "</td>";
echo " <td></td>";
}
echo"</table>";
db_close($db); #Closing the database
?>
I've been trying to figure this out for the past day with no avail. Hopefully someone can see what I cannot.
Thanks ahead.

Answer 1

To send post data you have to put it in the send method not the url, they have to be in key=value pairs and you should also encode them with encodeURIComponent, also you have to set the content type to application/x-www-form-urlencoded
var querystring = "zip=" + encodeURIComponent(zip) + "&st=" + encodeURIComponent(phone) ;
xmlhttp.open("POST","findCustomers.php" , true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(querystring);

Answer 2

mlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
I did not attempt to run your code but at first glance it looks like you have a typo declaring your xmlhttp variable.
var querystring = "?zip" + zip + "&st" + phone ;
I also see that it would seem your query string is incorrect. AJAX stands for asynchronous javascript and xml (now most commonly replaced with JSON)
you should format your query string with a : between the key and value pairs.
http://www.json.org/
I cannot be sure that these will fix your issue as I have not tried the code but I will give a couple of pointers.
If this is in fact the problem, that would tell me a couple of things.
1. you do not use your browsers developer tools because if you did you would see that an httprequest is never fired if that variable is incorrect.
2. you are developing in a text editor and not an IDE. (this is preferential I am only saying this as an observation not a recommendation necessarily)
I do not know what the purpose of this work is but im assuming you are not allowed to use jquery because the $.ajax method will allow you to clean this code up quite a bit and accomplish what you want in many fewer lines.