title: Send data to PHP popup page
body: <p>I want to send an input type element to a PHP page without form submission, only with javascript. I tried with <em>$.ajax</em> but no way. I don't know if it is a syntax or a logical error. Someone told me to do a single PHP page instead of two.</p>
  
  <p><strong>HTML page:</strong> (but is .php)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="../../js/jquery-3.2.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        #prova{
            padding-right: 1%;
            padding-top: 1%; 
        }
      &lt;/style&gt;
      &lt;script&gt;
  function ajax_post(apri){
      var stile = "top=10, left=10, width=650, height=600, status=no, menubar=no, toolbar=no scrollbars=no";
      // Create our XMLHttpRequest object
      var hr = new XMLHttpRequest();
      // Create some variables we need to send to our PHP file
      var url = "sperem.php";
      var fn = document.getElementById("id_buyers").value;
      alert(fn);
      var vars = "postid="+fn;
      alert(vars);
      hr.open("POST", url, true);
      // Set content type header information for sending url encoded variables in the request
      hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      // Access the onreadystatechange event for the XMLHttpRequest object
      hr.onreadystatechange = function() {
          if(hr.readyState == 4 &amp;&amp; hr.status == 200) {
              var return_data = hr.responseText;
              document.getElementById("status").innerHTML = return_data;
          }
      }
      // Send the data to PHP now... and wait for response to update the status div
      hr.send(vars); // Actually execute the request
      /*window.open(apri, "", stile);*/
      document.getElementById("status").innerHTML = "processing...";
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;center&gt;&lt;h1&gt;Add Orders:&lt;/h1&gt;&lt;/center&gt;
          &lt;form class="form-inline"  name="ordine"&gt;
              &lt;div class="form-group" id="prova"&gt;
                  &lt;label for="Buyers"&gt;ID_Buyers:&lt;/label&gt;
                  &lt;input type="text" class="form-control" placeholder="Enter IDBUYERS" id="id_buyers"&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" id="prova"&gt;
                  &lt;input type="submit" id="bottone"  value="show" onClick="ajax_post('sperem.php')"/&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
          &lt;br&gt;&lt;div id="status"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the <strong>Php page:</strong></p>
  
  <pre><code>&lt;?php
      $dato = $_POST['postid'];
      echo($dato);
  ?&gt;
  </code></pre>