title: Ajax to PHP on the same page
body: <p>I’m trying to send variables to the same page that makes the AJAX call.</p>
  
  <p>I receive successful result only if I separate the PHP script (e.g. <code>process.php</code> and change the AJAX <code>url</code> accordingly). </p>
  
  <pre><code>index.php
  
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() { 
          $('form').submit(function(e) { 
              e.preventDefault();
              $.ajax({
                  type        : 'POST',
                  url         : 'index.php',
                  data        : $(this).serialize(),
                  dataType    : 'json',
                  encode      : true
              })
              .done(function(data) {
                  $('#result').html(data);    
              })
          });
      }); 
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;?php
      $data = array();
      if(isset($_POST['name'])) {
          $data = 'You entered: ' . $_POST['name'];       
          echo json_encode($data);        
      }
  ?&gt;
      &lt;form&gt;
          &lt;input type="text" name="name"&gt;
          &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
  
      &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is it possible for the same page to capture and process variables we pass using AJAX?</p>