title: Pass current HTML textbox value from JavaScript to PHP without reloading the page or writing to the URL
body: <p>This file is <strong>index.php</strong>. It has a <strong>text box</strong> where someone can enter characters. Onkeyup, a JavaScript function is triggered, which calls search.php:</p>
  
  <pre><code>&lt;input type="text" id="search" placeholder="filter items" onkeyup="return searchFunc()"&gt;
  
  &lt;script&gt;
      function searchFunc() {
      var param = document.getElementById("search").value; //Current value in text box.
      getRequest(
          'snippets/search.php', //URL for the PHP file.
          drawOutput,  //Handle successful request.
          drawError    //Handle error.
      );
      return false;
      }
  
      //Handles drawing an error message.
      function drawError() {
      var container = document.getElementById('grid');
      container.innerHTML = 'Oops, there was an error!';
      }
  
      //Handles the response, adds the HTML.
      function drawOutput(responseText) {
      var container = document.getElementById('grid');
      container.innerHTML = responseText;
      }
      //Helper function for cross-browser request object.
      function getRequest(url, success, error) {
          var req = false;
          try{
  
          //Most browsers.
          req = new XMLHttpRequest();
          } catch (e){
  
          //Internet Explorer.
          try{
          req = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e) {
  
          //Older versions.
          try{
          req = new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
              return false;
              }
          }
      }
  
      if (!req) return false;
      if (typeof success != 'function') success = function () {};
      if (typeof error!= 'function') error = function () {};
      req.onreadystatechange = function(){
          if(req.readyState == 4) {
              return req.status === 200 ? 
              success(req.responseText) : error(req.status);
          }
      }
  
      req.open("GET", url, true);
      req.setRequestHeader("Cache-Control", "no-cache"); //Prevents browser from caching the last response (This line and the next two.)
      req.setRequestHeader("Pragma", "no-cache");
      req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
      req.send(null);
      return req;
      }
      &lt;/script&gt;
  
      &lt;div id="grid"&gt;
      Type something into the search field!
  </code></pre>
  
  <p>The above code works perfectly, and was composed mostly from me searching on this forum for hours.</p>
  
  <p>Next, let's move on to <strong>search.php</strong>. The point of this file (eventually) is to search a MySQL database for rows with 'title' that match what the user has began entering into the search box, and further refining the results after each keypress. But for testing purposes, <strong>All I want to display is the current value in the search box</strong>.</p>
  
  <pre><code>&lt;?php
  echo $_GET['param'];
  ?&gt;
  </code></pre>
  
  <p>When I begin typing into the search box, I get: <code>"Notice: Undefined index: param in C:\xampp\htdocs\testsite\snippets\search.php on line 22"</code>. I am definitely using $_GET wrong. I've seen countless threads that indicate you can achieve this by appending your parameter onto the URL like "?value="+param, and referencing it from PHP, but I'm not writing to the URL - the URL doesn't change at all through this entire process. Can someone point me in the right direction?</p>