title: Sending user Lat/Lng to php code
body: <p>So here is my dilemma, I want to be able to use the user's current location to populate the table on the index page with locations near the user.
  What would be the best way to do that?
  Here is the code I am using to gather the user's lat/lng values:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var x = document.getElementById("demo");
  
  function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition, showError);
      } else { 
          x.innerHTML = "Geolocation is not supported by this browser.";
      }
  }
  
  function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude + 
      "&lt;br&gt;Longitude: " + position.coords.longitude;
  }
  
  function showError(error) {
      switch(error.code) {
          case error.PERMISSION_DENIED:
              x.innerHTML = "User denied the request for Geolocation."
              break;
          case error.POSITION_UNAVAILABLE:
              x.innerHTML = "Location information is unavailable."
              break;
          case error.TIMEOUT:
              x.innerHTML = "The request to get user location timed out."
              break;
          case error.UNKNOWN_ERROR:
              x.innerHTML = "An unknown error occurred."
              break;
      }
  }
  
  navigator.geolocation.getCurrentPosition(success, error);
      function success(position) {
          var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&amp;language=en';
          $.getJSON(GEOCODING).done(function(location) {
               $('#latitude').html(position.coords.latitude);
               $('#longitude').html(position.coords.longitude);
                 $.ajax({
                     url:'table.php',
                     method: 'POST',
                     dataType: 'json',
                     data:{
                         lat: $('#latitude').val(),
                         lng: $('#longitude').val()
                     },
                     success: function(data){
                         console.log();
                     }
                  });             
               }
               function error(err) {
                   console.log(err)
               }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I have the user's current location,</p>
  
  <pre><code>&lt;input type="hidden" id="latitude"&gt;
  &lt;input type="hidden" id="longitude"&gt;
  </code></pre>
  
  <p>but how can I put those locations into PHP variables and pass them to the database query so that I can display them on the index page when the user lands on it.</p>
  
  <pre><code>  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css"&gt;
  
          &lt;script&gt;
          $(document).ready(function(){
              var dataTable = $('#searchTable').dataTable();
              $("#searchbox").keyup(function() {
                  dataTable.fnFilter(this.value);
              });
          });  
          &lt;/script&gt;
  
          echo'&lt;table id="searchTable" class="display"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Latitude&lt;/th&gt;
                          &lt;th&gt;Longitude&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  ';
  
                  (data to display from tables.php)
  
          echo'&lt;/tbody&gt;
              &lt;/table&gt;
                  ';
  </code></pre>
  
  <p>(I am using datatables to display the locations)
  Should I send the values via AJAX to a separate PHP page that has the queries, and then back to the main page again? So that as soon as the user lands on the main page the query is updated with the users location?
  Any help is greatly appreciated. I have searched for a solution for a few days now, and haven't had much luck.
  Thanks.</p>
  
  <p>Here is my tables.php page (Stil trying to figure out how to send the data properly back to the index page)</p>
  
  <pre><code>&lt;?php
  require_once("connect.php");
  
  $lat = isset($_POST['lat']) ? $_POST['lat'] : null;
  $lng = isset($_POST['lng']) ? $_POST['lng'] : null;
  
  if($lat &amp;&amp; $lng){
  
      $locations = array();       
  
      $stmt = "SELECT * FROM location LIMIT 500"; //Query data from table
      $stmt = $conn-&gt;prepare($stmt);
      $stmt-&gt;execute();
  
      if($stmt-&gt;rowCount() &gt; 0){
          $result = $stmt-&gt;fetchAll();
  
          foreach($result as $row){ 
               echo'&lt;tr&gt;
                  &lt;td&gt;';              
                     $locations['Latitude'][] = $row;
                  echo'&lt;/td&gt;
                  &lt;td&gt;';
                     $locations['Longitude'][] = $row;    
                  echo'&lt;/td&gt;
               &lt;/tr&gt;';        
          }
      }
       return json_encode($locations);
  }
  ?&gt;
  </code></pre>