Passing values from JavaScript to PHP using AJAX

Question

I don't know why my code is not working, I am trying to send the coordinates from JavaScript to PHP using AJAX and I am able to pull values from JavaScript to textbox but values are not passed to PHP. Any help is highly appreciated.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
}
$( document ).ready(function() {
$.ajax({url:"samepage3.php",type:"POST",async:false,
   data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}
});
});
</script>
</head>
<body onload="getLocation()">
<input type="text" id="getlat" name="getlat" /> 
<input type="text" id="getlon" name="getlon" />
<?php
if(isset($_POST["getlat"]))
{
    $lat = $_POST["getlat"];
    echo $lat;
}
if(isset($_POST["getlon"]))
{
    $lon = $_POST["getlon"];
    echo $lon;
}
?>
</body>
</html>

UPDATE 1:

I am running this code in file samepage3.php and I need the action to be happened on the same page without reloading the page

Try data:{'getlat':$("#getlat").val(),'getlon':$("#getlon").val() — BernardoLima
– BernardoLima, Commented Aug 28, 2014 at 1:09

Prabowo Murti · Accepted Answer · 2014-08-28 01:28:13Z

You can not execute the PHP script on the samepage3.php, after the page is fully loaded. I suggest to separate the page, and create the response using AJAX. Something like this.

File index.php

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script>
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                }

            }
            function showPosition(position) {
                document.getElementById("getlat").value = position.coords.latitude;
                document.getElementById("getlon").value = position.coords.longitude;
            }

            function fireAjax(){
                $.ajax({url:"response.php",type:"POST",async:false,
                    data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()},
                    success: function (response){
                        $('#response').html(response);
                    }
                });
            }
        </script>
    </head>
    <body onload="getLocation()">
        <input type="text" id="getlat" name="getlat" /> 
        <input type="text" id="getlon" name="getlon" />

        <button onclick="fireAjax()" >Send</button>

        <div id="response">
        </div>
    </body>
</html>

File response.php

<?php
if (isset($_POST["getlat"]))
{
    $lat = $_POST["getlat"];
    echo 'Latitude: ', $lat, '<br/>';
}
if (isset($_POST["getlon"]))
{
    $lon = $_POST["getlon"];
    echo 'Longitude : ', $lon;
}

Ford · Accepted Answer · 2014-08-28 01:38:23Z

0

The root cause is getLocation function will be a big delay, so you need to fire ajax call after getLocation is done. Please see the blow revised version:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
    $.ajax({url:"samepage3.php",type:"POST",async:false,
           data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}
        });
}
$( document ).ready(function() {

});
</script>
</head>
<body onload="getLocation()">
<input type="text" id="getlat" name="getlat" /> 
<input type="text" id="getlon" name="getlon" />
<?php
if(isset($_POST["getlat"]))
{
    $lat = $_POST["getlat"];
    echo $lat;
}
if(isset($_POST["getlon"]))
{
    $lon = $_POST["getlon"];
    echo $lon;
}
?>
</body>
</html>

The only change is doing ajax call in the function showPosition.

answered Aug 28, 2014 at 1:38

Ford

313 bronze badges

1 Comment

Ford Over a year ago

You cannot get the data in the first request, but you will get the data in the second request which is a ajax call.

Kevin · Accepted Answer · 2014-08-28 01:46:57Z

0

First off, separate the PHP processing. Now after getting the location using the callback then perform the AJAX. Sample Code:

samepage3.php

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}

function showPosition(position) {

    $("#getlat").val(position.coords.latitude);
    $("#getlon").val(position.coords.longitude);
    $.ajax({
        url: 'request.php',
        type: 'POST',
        dataType: 'JSON',
        data:{
            getlat: $("#getlat").val(),
            getlon: $("#getlon").val()
        },
        success: function(response) {
            console.log(response);
        }
    });
}

$(document).ready(function() {
    getLocation();
});
</script>
<body>
<input type="text" id="getlat" name="getlat" />
<input type="text" id="getlon" name="getlon" />

request.php

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $lat = $_POST["getlat"];
    $lon = $_POST["getlon"];
    echo json_encode(array('lat' => $lat, 'lon' => $lon));
    exit;
}
?>

edited Aug 28, 2014 at 1:46

answered Aug 28, 2014 at 1:20

Kevin

41.9k12 gold badges57 silver badges72 bronze badges

9 Comments

StackSlave Over a year ago

Just use a separate PHP page. This is a bad idea.

Kevin Over a year ago

@PHPglue yes i know thats what i would suggest also to be honest, i just made it this way since i can't separate a php file for a demo anyway.

Barmar Over a year ago

Ugh, setTimeout is a horrible, kludgey way to do it. Put that code in the callback function.

Prabowo Murti Over a year ago

Why put everything on the same page?

Kevin Over a year ago

@PrabowoMurti its separated now. okay?

|

Chad Hedgcock · Accepted Answer · 2014-08-28 02:12:18Z

The sole purpose of AJAX is to fetch and send data from a server without reloading the page.

You don't need any data from the server. You need data from the BROWSER--namely--geolocation coordinates, so AJAX and php have no bearing on what you need to do here. This can be done in pure HTML.

On the other hand, if you want to do something like save the coordinates to a database or use IP address as a fallback when the navigator doesn't support geolocation, that's when you could use the help of a server and AJAX would come into play.

Simply replace your ajax function with getLocation().

<!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
      <script>
        function getLocation() {
          if (navigator.geolocation) {
                 navigator.geolocation.getCurrentPosition(showPosition);
           }else{
             console.warn("Can't geolocate!");
             //this would be a good place to fall back on geolocation by IP (AJAX necessary)
           }
        }

        function showPosition(position) {
          console.info('Latitude: ' + position.coords.latitude);
          document.getElementById("getlat").value = position.coords.latitude;
          console.info('Longitude: ' + position.coords.longitude);
          document.getElementById("getlon").value = position.coords.longitude;
        }
        $( document ).ready(function() {
            getLocation();
        });
      </script>
   </head>
   <body>
     <input type="text" id="getlat" name="getlat" /> 
     <input type="text" id="getlon" name="getlon" />
   </body>
</html>

Collectives™ on Stack Overflow

Passing values from JavaScript to PHP using AJAX

4 Answers 4

Comments

1 Comment

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related