将 JavaScript 获取的地理位置传递到 HTML 表单中以发送到数据库

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);

?>

Answer 1

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.

Answer 2

为了使您必须使用 Ajax 和 jquery