sending variables to php via ajax and jquery

Question

i want to request the users geolocation via html5-geolocation and send it to the next page I've been told that i've to use ajax/jquery, so this is my code:

<form action="response.php">
        <button onclick="getLocation()">Start</button>

<script>

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function successFunction(position) {
   var lat = position.coords.latitude;
   var longi = position.coords.longitude;

    $.ajax({
  type: "POST",
  url: "response.php",
  data: { latitude: lat, longitude: longi }
  }).done(function( msg ) {
  alert( "Data Saved: " + msg );
});
}
</script>
</form>

and now i want to "echo" the latitude and longitude on my response.php page but i have no idea how to do :'( I tried this:

$latitude = $_POST["latitude"]; 
echo $latitude;

but the page is blank

check first that you have any value in var lat var longi — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jun 3, 2015 at 11:15
You have just declared your function. Are you calling it somewhere? — Indrasinh Bihola
– Indrasinh Bihola, Commented Jun 3, 2015 at 11:20
Okay i changed the function name to succes, but still no result — Juloius
– Juloius, Commented Jun 3, 2015 at 11:21

Indrasinh Bihola · Accepted Answer · 2015-06-04 04:38:10Z

1

Try This:

index.html:

<html>
<head></head>
<body>
    <form action="response.php" method="post">
      <input type="hidden" id="latitude" name="latitude" value="" />
      <input type="hidden" id="longitude" name="longitude" value="" />
      <input type="submit" value="Start" />
    </form>
</body>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    function getLocation() {

         var options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
         };

        function success(pos) {
           successFunction(pos);
        };

        function error(err) {
            console.warn('ERROR(' + err.code + '): ' + err.message);
        };

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success, error,options);
        } else { 
            //x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function successFunction(position) {
       var lat = position.coords.latitude;
       var longi = position.coords.longitude;

        $('#latitude').val(lat);
        $('#longitude').val(longi);
    }
    getLocation();
</script>
</html>

response.php:

<?php
    $latitude = $_POST["latitude"]; 
    $longitude = $_POST["longitude"]; 
    echo "Latitude:".$latitude."</br>";
    echo "longitude:".$longitude;
?>

Just create index.html copy and paste this code and make sure that response.php like this.

/yourprojectdirectory/index.html
/yourprojectdirectory/response.php

edited Jun 4, 2015 at 4:38

answered Jun 3, 2015 at 11:32

Indrasinh Bihola

2,1153 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Juloius Over a year ago

There is still a blank page :/ Im feeling really stupid right now, sorry guys :'(

Nishit Maheta Over a year ago

@Juloius have you loaded jquery library in page ?

Juloius Over a year ago

Yeah ofc, i think otherwise there would be an error

Indrasinh Bihola Over a year ago

So what issue you are facing now?? Check your console.

Juloius Over a year ago

Issue: my response.php is just blank

|

Karthikeyan Ganesan · Accepted Answer · 2015-06-03 12:06:13Z

0

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function successFunction(position) {
   var lat = position.coords.latitude;
   var longi = position.coords.longitude;

    $.ajax({
  type: "POST",
  url: "response.php",
  data:"data="+ '{ "latitude":"'+ lat+'", "longitude": "'+longi+'" }'
  }).done(function(msg) {
  alert( "Data Saved: " + msg );
});
}
</script>




$location =json_decode( preg_replace('/\\\"/',"\"",$_POST['data'])); 
print_r($location);
 $lat=$location->latitude;
 echo $lan=$location->longitude;

answered Jun 3, 2015 at 12:06

Karthikeyan Ganesan

2,05524 silver badges26 bronze badges

Collectives™ on Stack Overflow

sending variables to php via ajax and jquery

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related