GPS location is fetched after second click not on first click-CodePudding

I want to fetch live gps location using javscript to store it in database. I already have implemented it. when user clicks on button. But it fetches location on second click.

Html code

<form action="user_location" method="post" id="form-{{$user->id}}">
    @csrf
    <input type="hidden" name="id" value="{{$user->id}}">
    <input type="hidden" name="location" id="location-{{$user->id}}">
</form>
<a onclick="getLocation({{$user->id}})" >{{__('Get Location')}}</a>

Javscript code

function getLocation(user_id) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
            
        } else { 
            geolocation = "Geolocation is not supported by this browser.";
        }
        
        if(setlocation){
            form = document.getElementById("form-" user_id);
            var b = document.getElementById("location-" user_id)
            b.value = x.textContent;
            form.submit();
        }
    }

    function showPosition(position) {
        x.innerText = position.coords.latitude   "-"   position.coords.longitude;
        setlocation = true;
    }

CodePudding user response：

The getCurrentPosition function is asynchronous. That means that when it is called, it will allow the code after it to run before finishing. So that means that setLocation will not be true whenever your code reaches the following if statement:

if(setlocation){ // setlocation is still false

Handle your results of getting the position inside the success callback of getCurrentPosition.

function getLocation(user_id) {
  if (!navigator.geolocation) {
    return;
  }

  const form = document.getElementById("form-"   user_id);
  const location = document.getElementById("location-"   user_id);

  navigator.geolocation.getCurrentPosition(function(position) {   
    const { coords } = position; 
    location.value = coords.latitude   "-"   coords.longitude;
    form.submit();
  });
}