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

Issue

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>

Solution

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>

Answered By - Archit Gargi