geolocation want to take data from java script and pass to a Hidden

Question

see the code below wanted to catch the 2 infomations in passing to a variable or to an input.

<p  id="demo">Clique no botão para receber sua localização em Latitude e Longitude:</p>
<button onchange="getLocation()" onclick="getLocation()">Clique Aqui</button>

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="O seu navegador não suporta Geolocalização.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

Answer 1

To accomplish the desired, you must put 2 Hidden inputs in your html and then add the code below within the function showPosition in that way:

<p  id="demo">Clique no botão para receber sua localização em Latitude e Longitude:</p>
<button onchange="getLocation()" onclick="getLocation()">Clique Aqui</button>

<input type="hidden" id="latitude">
<input type="hidden" id="longitude">

<script>
var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition);
    }else{x.innerHTML="O seu navegador não suporta Geolocalização.";}
}
function showPosition(position)
{
    x.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude; 

    document.getElementById('latitude').value = position.coords.latitude;
    document.getElementById('longitude').value = position.coords.longitude;
}
</script>

Answer 2

I suggest you use the document.getElementById, you create an input with type Hidden and with some id, for example:

<input type="hidden" id="latitude" name="latitude">
<input type="hidden" id="longitude" name="longitude">

Now, after using your function, you arrow the dice into this input, it would be something like this:

if (navigator.geolocation) {
    // essa successFunction vai receber os dados da posição
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
} 

function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    document.getElementById("latitude").value = lat;
    document.getElementById("longitude").value = lng;
}
    

Now just put these inputs into a form and send to PHP. I suggest using a ajax or Xios from life to send to PHP