'Show "loading..." message until get the coordinate

Here I already have the script to get the coordinate (Latitude & Longitude). Since, when I clicked the button, some people wonder when the coordinate will come up. So, how to show the loading... until the coordinate is shown in the input text without reloading the page.

Here is the code:

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div>
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div>
<div class="mb-3">
  <button type="button" class="btn btn-link" style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button>
</div>
javascripthtml


Solution 1:[1]

The below code will work. I have added a <p> tag which doesn't have text in it by default. When the user clicks on the button, I paste "loading..." inside the <p> tag and when the result is shown I change it back to blank.

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  document.getElementById("loadingText").innerHTML = "loading...";
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
    document.getElementById("loadingText").innerHTML = "";
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
    document.getElementById("loadingText").innerHTML = "";
  }
}

function showPosition(position) {
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}
#loadingText {
  display: block !important;
}
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div>
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div>
<div class="mb-3">
  <button type="button" class="btn btn-link" style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button>
  <p id="loadingText"></p>
</div>

Solution 2:[2]

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  document.getElementById("input_latitude").value = "Loading...";
  document.getElementById("input_longitude").value = "Loading...";
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, () => {console.log("Error")});
  } else { 
      x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  console.log(position);
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}
<div id="lati"></div>
<div id="longi"></div>
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div>
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div>
<div class="mb-3">
<button type="button" class="btn btn-link" style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button>
</div>

Solution 3:[3]

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  if (navigator.geolocation) {
     document.getElementById("input_latitude").value = "Loading...";
     document.getElementById("input_longitude").value = "Loading...";
     document.querySelectors('input').setAttribute("disabled");
     //input is disabled so that input can not be edited.
      navigator.geolocation.getCurrentPosition(showPosition, () => 
     {console.log("Error")});
  } else { 
      x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  console.log(position);
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 thpbaxxter
Solution 3 Aamir Khan

Related Questions