So I'm having this function:
$(document).ready(function() {
var userInput = $("#userInput").val();
$.ajax({
url: 'foodstore.php',
data: userInput,
method: 'GET',
success: function(response){
$("#underInput").html(response);
}
});
});
php file:
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food = $_GET['food'];
$foodArray = array('tuna','bacon','beef','ham');
if(in_array($food,$foodArray)){
echo 'We do have '.$food.'!';
}elseif ($food==''){
echo 'Enter a food you idiot';
}else{
echo 'Sorry punk we dont sell no '.$food.'!';
}
echo '</response>';
?>
HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script src="foodstore.js" type="text/javascript"></script>
</head>
<body>
<h3>The Chuff Bucket</h3>
Enter the food you would like to order:
<input type="text" id="userInput" />
<div id="underInput" />
</body>
</html>
And when I try to run it I get an error in the console: Uncaught TypeError: Cannot read property 'ownerDocument' of null I know I am missing something, but I don't know what. I am learning JQuery and it's a little blurry to me.
