title: jquery / ajax to run php query using user input as criteria, then display query result without page refresh
body: <p>I've spent the last 24 hours trying to find an answer, and while there are similar questions, the answers seem to be either more complicated than my use-case (so I don't understand it), or I find low-quality questions/answers.</p>
  
  <p>My title really says it all, except for my code, but to reiterate in full sentences: I know how to update mysql database fields with user input and php using jquery. Separately, I know how to retrieve php query results using ajax. What I can't figure out is how to do both these things at the same time: <em>Use ajax to set user input as a parameter of a php query, then also pull the results of that query.</em></p>
  
  <p>I thought it was going to be simple once I figured these things out separately, but I just don't understand .ajax() well enough at all, and that's why I'm here.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>User Input Page</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;title&gt;Pull from query&lt;/title&gt;
  
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
   &lt;style&gt;
  
   #topRow {
       margin-top:40px;
       text-align:center;
   }
   &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div class="container contentContainer" id="topContainer"&gt;
   &lt;div class="row"&gt;
  
       &lt;div class="col-md-6 col-md-offset-3" id="topRow"&gt;
       &lt;textarea class="form-control"&gt;&lt;/textarea&gt;
       &lt;/div&gt;
  
       &lt;div class="row"&gt;
           &lt;div class="col-md-6 col-md-offset-3" id="output" style="border:1px solid #000000;height:40px;margin-top:40px;text-align:center;"&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/div&gt;
  
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
      //  "keyup" RUNS FUNCTION EVERY TIME USER USES KEYBOARD
      $("textarea").keyup(function() {
  
          $('#output').html("loading...");
  
          var email = $('textarea').val();
  
          $.post("5Query.php", {email:$('textarea').val()} );
  
          // ACCESS QUERY RESULTS (HOPEFULLY!)
          $.ajax({                                      
              url: '5Query.php',
              dataType: 'json',
              success: function(data)
                  {
                      var result = data
                      $('#output').html(result);
                  }
      });
  
          })
  
      &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>PHP Query in separate file</strong></p>
  
  <pre><code>&lt;?php
  
    // SET DATABASE LINK AS A VARIABLE THAT CAN BE USED WHEN RUNNING QUERIES
    $link = mysqli_connect(...connection stuff...);
  
    if (mysqli_connect_error()) {
      die("Could not connect");
    }
  
    // SELECT all fields FROM databasename
    $query = "SELECT * FROM users WHERE email='".mysqli_real_escape_string($link, $_POST['email'])."'";
  
    // CREATE ARRAY CONTAINING ALL VALUES FOR ROW MATCHING QUERY CRITERIA
    $row = mysqli_fetch_array(mysqli_query($link, $query));
    $name = $row['name'];
    $error = 'I could not find that user name';
  
    //echo json_encode($row);
  
    if($row){
    echo json_encode($name);
    } else {
      echo json_encode($error);
    }
  
  
  ?&gt;
  </code></pre>
  
  <p>As you can see, I tried using $.post() to set the query parameter, since that is the only way I know how, but it does return any results. When I hard-code a value into the php query that I know is in the mysql db table, rather than trying to post user input to the query, it correctly returns and displays the query result.</p>
  
  <p>I'm hoping that some of you smart people can spot something obvious that a novice like me wouldn't see... I definitely feel like everything should take place within .ajax(), but I just don't know how to do it, and it's weirdly difficult to find the answer anywhere.</p>
  
  <p>Please let me know how to improve my question, or where I might find an answer (although keep in mind that I'm a super-novice with ajax, so it's entirely possible that I may have seen an answer and just did not know what I was looking at).</p>