Passing Geo location obtained by JavaScript into a HTML form to be sent to a Database

Question

I'm trying to get the user's current location and have it store in a hidden input so that once they finish filling up the form their location is sent together with everything else to the database to be stored.

The problem I'm getting is undefined index on my php, which leads me to believe that the coordinates are not being sent to the input.

I have looked up to other posts that talked about the same topic but could not find an answer for my problem.

Here is my HTML Form (the DIVs there are just to display the coordinates):

<form method="POST" action="example.php">
        <br />
        <div id="latGPS"></div>
        <input type="hidden" id="geoPosLat" value ="" />
        <br />
        <div id="lonGPS"></div>
        <input type="hidden" id="geoPosLon" value ="" />
        <br />
        <input type="text" name="addPoiDescription" placeholder="Description" style="width:200px; height:100px" />
        <br />
        <input type="submit" value="Submit!" />
    </form>

Javascript:

function init(){

//Get user's geolocation
if(navigator.geolocation)
{
    navigator.geolocation.watchPosition (processPosition, handleError, {enableHighAccurary:true, maximumAge: 5000});

}
else
{
    alert("Sorry, geolocation not supported");
}

}


// Process GPS Information
function processPosition(gpspos)
{
var latGPS = gpspos.coords.latitude;
    var lonGPS = gpspos.coords.longitude;

//Show their location
document.getElementById("latGPS").innerHTML = 'Latitude: ' + latGPS;
document.getElementById("lonGPS").innerHTML = 'Longitude: ' + lonGPS;

//store location 
document.getElementById("geoPosLat").innerHTML = latGPS;
document.getElementById("geoPosLon").innerHTML = lonGPS;
}

function handleError(err)
{
alert ('An error occurred: ' + err.code);
 }

PHP:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

$aPoiName = $_POST["addPoiName"];
$aPoiCountry = $_POST["addPoiCountry"];
$aPoiRegion = $_POST["addPoiRegion"];
$aPoiType = $_POST["addPoiType"];
$aPoiDescription = $_POST["addPoiDescription"];
$lat = $_POST["geoPosLat"];
$lon = $_POST["geoPosLon"];


// Curl -----------------
// Initialize
$connection = curl_init();

//URL to sned the request to
curl_setopt($connection, CURLOPT_URL, 'https://example.php');

$dataToPost=
[   "Name" => $aPoiName ,
    "Country" => $aPoiCountry ,
    "Region" => $aPoiRegion , 
    "Type" => $aPoiType ,
    "Description" => $aPoiDescription,
    "Lat" => $lat,
    "Lon" => $lon
];
//Execute the request 
curl_setopt($connection,CURLOPT_RETURNTRANSFER, 1);
curl_setopt($connection,CURLOPT_POSTFIELDS,$dataToPost);
$response = curl_exec($connection);

//HTTP CODE
$httpCode = curl_getinfo($connection, CURLINFO_HTTP_CODE);
echo "The script returned the HTTP status code: $httpCode <br />";
//close 
curl_close($connection);

?>

That didn't solve the problem. I will add my php to the post as there might be a problem there as well. — J.Alex, Jan 17 '19 at 20:31
The $_POST key is determined by the input's `name` attribute. You only have one input with a `name`. — , Jan 17 '19 at 20:52
Possible duplicate of ["Notice: Undefined variable", "Notice: Undefined index", and "Notice: Undefined offset" using PHP](https://stackoverflow.com/questions/4261133/notice-undefined-variable-notice-undefined-index-and-notice-undefined) — miken32, Jan 17 '19 at 23:05

score 0 · Answer 1 · answered Jan 17 '19 at 20:43

0

For make you have to use Ajax and jquery

answered Jan 17 '19 at 20:43

Jérémy Gachon

252
2
6
27

I'm trying not use jquery. But can do AJAx. Thank you – J.Alex Jan 17 '19 at 20:49
Ok. Use jquery, is more esay !! – Jérémy Gachon Jan 17 '19 at 20:58

Elliot · Answer 2 · 2019-01-17T20:54:21.460

Not sure if this will fix your problem or not however I'm pretty sure you need to specify a name in your HTML for each of your fields and then link them up to your PHP rather than using the ID.

For example your HTML would be something like

  <input name="LATPOSNAME" type="hidden" id="geoPosLat" value ="" />

and then you would hook that name upto your php like so

$lat = $_POST["LATPOSNAME"];

The element's name attribute name="unique-name-here" value is used by PHP as key to enable access to the data value of the specified form field element when you submit the form.

If you don't declare a name then your PHP will be unable to get your value as there is no key. This means you can't access that element form data value after the form has been submitted to the server because its key is undefined.

Given that name, it should be `$_POST["LATPOSNAME"]` though; I guess you mean `name="geoPosLat"` — , Jan 17 '19 at 20:53
Cheers @ChrisG I forgot to edit it after I copied it over. Have edited my answer. — Elliot, Jan 17 '19 at 20:55

Passing Geo location obtained by JavaScript into a HTML form to be sent to a Database

2 Answers2

Linked