Cannot read property 'ownerDocument' of null - JQuery AJAX error
<p>So I'm having this function:</p>

<pre><code>$(document).ready(function() {
     var userInput = $("#userInput").val();
$.ajax({
   url: 'foodstore.php',
   data: userInput,
   method: 'GET',
   success: function(response){
       $("#underInput").html(response);
   }
});
 });
</code></pre>

<p>php file:</p>

<pre><code>&lt;?php
header('Content-Type: text/xml');
echo '&lt;?xml version="1.0" encoding="UTF-8" standalone="yes" ?&gt;';

echo '&lt;response&gt;';
$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 '&lt;/response&gt;';

?&gt;
</code></pre>

<p>HTML file:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script src="jquery-3.1.1.js"&gt;&lt;/script&gt;
        &lt;script src="foodstore.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;h3&gt;The Chuff Bucket&lt;/h3&gt;
        Enter the food you would like to order:
        &lt;input type="text" id="userInput" /&gt;
        &lt;div id="underInput" /&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>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.</p>