title: Ajax fails when called within a function
body: <p>When I call Ajax in the main body of Jquery code, it returns the correct result, but when I call it from within a function, it fails.  Here is the server side code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;?php
      $what       = $_POST["what"];
      $where      = $_POST["where"];
  
      if(isset($what)){
          $data = array(
              "what"      =&gt; $what,
              "where"     =&gt; $where,
          );
          echo json_encode($data);
      }
      ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the code that succeeds (returns text to the browser):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
  
              what = "dog";
              where = "in the manger";
  
              $.ajax({
                  url: "test.php",
                  type: "POST",
                  data: {what : what, where : where},
                  dataType: "json",
                  success: function (data)
                  {
                      $("#result").text(JSON.stringify(data));
                  },
                      error: function (error)
                  {
                      alert("ajax error ");
                  }
              });
  
              &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt; &lt;div id="result"&gt;&lt;/div&gt; &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here is the code that fails (alerts "error"):
  `</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    &lt;html&gt;
      &lt;head&gt;
          src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              what = "dog";
              where = "in the manger";
  
              function get_click () {
              $.ajax({
                  url: "test.php",
                  type: "POST",
                  data: {what : what, where : where},
                  dataType: "json",
                  success: function (data)
                  {
                      $("#result1").text(JSON.stringify(data));
                  },
                  error: function (error)
                  {
                      alert("ajax error " + JSON.stringify(error));
                  }
              });
              }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="result1"&gt;&lt;/div&gt; &lt;/body&gt;
          &lt;form onsubmit="get_click()"&gt;
              &lt;input type="submit"&gt;
          &lt;/form&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make the function-wrapped Ajax call work because I need to process  data from a form before sending it to the server.  What am I doing wrongly?</p>
  
  <p>The environment is a headless Raspberry Pi with Raspbian os, FireFox browser on Windows 10.</p>