Posting GeoLocation From JavaScript to PHP using Cookies

Question

I am trying to send GoeLocation coordinates from JavaScript to PHP using Cookies and I am getting a Notice as Notice: Undefined index: data in /Applications/XAMPP/xamppfiles/htdocs/samepage.php on line 24

My file name is samepage.php and I want to post this on the same page.

My code:

<html>
<head>
<title>Test Geo Location</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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() {
$.cookie("data",{getlat:$("#getlat").val(),getlon:$("#getlon").val()});
});
</script>
</head>
<body onload="getLocation();">
<input type="text" id="getlat" name="getlat" value="<?php echo $_POST['polat']; ?>" /> 
<input type="text" id="getlon" name="getlon" value="<?php echo $_POST['polon']; ?>" />
<?php
$data = json_decode($_COOKIE["data"]);
$lat = $data["getlat"];
$lon = $data["getlon"];
?>
</body>
</html>

Look to AJAX for posting from JavaScript to PHP without reloading — Jeff Clayton, Aug 28 '14 at 00:46
A cookie is not set until the Browser reloads. Also, PHP executes before your JavaScript, unless you're using AJAX. You may also want to use `navigator.geolocation.watchPosition()`, because the Client may show a popup asking permission every time that fires. — StackSlave, Aug 28 '14 at 00:50

score 0 · Answer 1 · edited May 23 '17 at 12:13

There are a few things you need to make sure: 1) php code runs in server side; 2) javascript code runs in client side; 3) cookie operation is not supported by jQuery by default. please see relevant question

4) in php json_decode function, a stdClass object will be returned, not an array. Please see json_decode

What you need to do is: 1) include cookie jquery plugin 2) set cookie by js function first and then call php URL

I share a revised version with you and you will get what you expected(You need to download jquery.cookie.js first).

<html>
<head>
<title>Test Geo Location</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.cookie.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 doSubmit(){
    $.cookie("data",'{\"getlat\":' + $("#getlat").val() + ',\"getlon\":' + $("#getlon").val() + '}');
    document.form1.submit();
}
$( document ).ready(function() {


});
</script>
</head>
<body onload="getLocation();">
<form name="form1">
<input type="text" id="getlat" name="getlat" value="<?php echo $_POST['polat']; ?>" /> 
<input type="text" id="getlon" name="getlon" value="<?php echo $_POST['polon']; ?>" />
<input type="button" value="submit" onclick = "doSubmit()">
</form>
<?php
$data = json_decode($_COOKIE["data"]);
$lat = $data->getlat;
$lon = $data->getlon;
?>
</body>
</html>

Posting GeoLocation From JavaScript to PHP using Cookies

1 Answers1