Javascript ajax request

Question

Basically what I'm trying to do is have a text field where the user enters in a foodstuff, and as theyre typing a message updates to say whether or not said item is in stock (through contacting the database).

My php code for the xml:

require 'connect.php'; 
header('Content-Type: text/xml');
echo "<?xml version='1.0' encoding='UTF-8' standalone='yes'?>";
echo '<response>';
if (isset($_GET['foodInput'])&&!empty($_GET['foodInput'])) {
 extract($_GET);
 $sql = "SELECT * FROM food WHERE name=:foodInput";
 $stmt = $db -> prepare($sql);
 if ($stmt ->execute(array(':foodInput'=>$foodInput))) {
 if ($stmt -> rowCount()>0) {
 $results = $stmt -> fetch(PDO::FETCH_OBJ);
 echo 'Yes, we do in fact have '.$results->name.'.'; 
 }else{ echo 'No, '.$foodInput.' is not available champ.'; }
 }
}else{ echo 'Please enter foodstuff.'; }
echo '</response>';

My Javascript for the rest:

function createHttp(){
 var xmlhttp;
 if (window.XMLHttpRequest) {
 xmlhttp = new XMLHttpRequest();
 }else if (window.ActiveXObject) {
 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 };
 return xmlhttp;
}
var xmlhttp = createHttp();
function handleServerResponse(){
 if(xmlhttp.readyState==4){
 if (xmlhttp.status==200) {
 xmlResponse = xmlhttp.responseXML;
 xmlDoc = xmlResponse.documentElement;
 message = xmlDoc.firstChild.data;
 document.getElementById('updated').innerHTML = message;
 setTimeout(process, 1000);
 };
 }else{
 alert('Something is amiss');
 }
}
function process(){
 if (xmlhttp.readyState==4||xmlhttp.readyState==0){
 food = encodeURIComponent(document.getElementById('food').value);
 xmlhttp.open('GET', 'include/foodstore.php?foodInput='+food,true);
 xmlhttp.onreadystatechange = handleServerResponse;
 xmlhttp.send();
 }else{
 setTimeout(process, 1000);
 }
}

As soon as the process is initialised I get the alert something is amiss message that occurs when readyState is no longer 4. I entered a console.log(xmlhttp.readyState) and the resulting log was basically 1234123412341234 etc. So instead of sticking it out at 4 it would do something, else? Honestly I'm not particularly sure what readyState is.

When I remove this alert and I'm allowed to enter text it updates as the purpose requires. But as soon as the alert is turned back on, bingo there it is again.

Any suggestions? Really new to this area.

Thanks

Edit: Html

<form action="">
 <label for="food">Enter foodstuff:</label>
 <input type="text" id="food" name="foodInput" onkeyup="process()"><br>
 </form>
 <h4 id="updated"></h5>

Answer 1

xmlhttp.open('GET', 'include/foodstore.php?food='+food,true);

Here you are assigning the value to the variable named food, but in the php you are trying to get the value of a variable called foodInput

if (isset($_GET['foodInput'])&&!empty($_GET['foodInput'])) {

Edit:

So simply change the xmlhttp.open to:

xmlhttp.open('GET', 'include/foodstore.php?foodInput='+food,true);

Regarding xmlhttp readystates, the different states are as follows:

State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

In your case I guess you want to put the else clause to this if instead:

if (xmlhttp.status==200) { ... }

• Russ: food is the input from the text field added to the GET of the php file, they are the same but named different for clarities sake. food = encodeURIComponent(document.getElementById('food').value) - the data entered. foodInpuut is the name given to the name field of the input field. Is that not how it should go? Getting muddled here sorry. Edit: added the corresponding html
• Johan Karlsson: @RussellKitchen $_GET['foodInput'] is looking for a variable include/foodstore.php?foodInput=VALUE
• Russ: Oh... christ. Well that fixed that particular bug! Thanks! Also instead of making a new post I've rewritten a bit to focus on the secondary issue.

Answer 2

You run your process function only on DOM load but you should call it when the value of the input is changed with onkeyup="process()".