title: Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick
body: <p>I have a search form where I'm trying to have it output the results at the bottom of the page without reloading. </p>
  
  <pre><code>&lt;form action='' method='post'&gt;
  &lt;div id="search-form"&gt;      
  &lt;input type="text" name="search" class="search-field" id="search" value="" /&gt;
  &lt;div class="submit-container"&gt;
  &lt;button type="button" value="" class="submit" id="searchbutton" onclick="searchoutput()" /&gt;&lt;/button&gt;
              &lt;/div&gt;
    &lt;/form&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;p&gt;Type First Name&lt;/p&gt;
  </code></pre>
  
  <p>I want the search results to show below when the button is clicked, using Ajax call to another script. I keep getting an error: "Uncaught ReferenceError: searchoutput is not defined at HTMLButtonElement.onclick</p>
  
  <p>Here is my javascript (using jquery):</p>
  
  <pre><code>$( document ).ready(function() {
  function searchoutput() {
       if($(".search-field").val().length &gt; 5) { //only shows results when more than 5 characters have been entered
          var search = $(".search-field").val();
          var update = $(".result");
          var goal = 0;
          $.get("query-include.php" , {search: search, goal: goal})
          .done(function( data ) {
            update.empty();
            update.append(data);
            $(this).remove();
                                  });
                                               };
                           } 
    $( ".search-field" ).keydown(function() {
        var update =$(".results");
        update.empty();
                                         });
                               });
  </code></pre>
  
  <p></p>
  
  <p>I have checked other posts and spent a long time trying to get the solution on my own. The odd thing is if I add an event listener for "keyup" in order to run the same function searchoutput as the user types:</p>
  
  <pre><code>var searchfield = document.getElementById("search");
  searchfield.addEventListener("keyup", searchoutput);
  </code></pre>
  
  <p>Then I don't get the ReferenceError and the script runs fine.. I only get the function issue on button click.</p>