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

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 ><input  type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div>
<div ><input  type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div>
<div >
  <button type="button"  style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button>
</div>

CodePudding user response：

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 ><input  type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div>
<div ><input  type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div>
<div >
<button type="button"  style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button>
</div>

CodePudding user response：

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 ><input  type="text" name="business_latitude" id="input_latitude" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_latitude; ?>" required></div>
<div ><input  type="text" name="business_longitude" id="input_longitude" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $business_longitude; ?>" required></div>
<div >
  <button type="button"  style="font-family: Roboto, sans-serif;" onclick="getLocation()">Current Location</button>
  <p id="loadingText"></p>
</div>

CodePudding user response：

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