Передача информации из функции Javascript в форму

Question

Я пытаюсь передать результаты position.coords.latitude и position.coords.longitude в значения "lat" и "lng" в форме, но я понятия не имею, как?

<button onclick="getLocation()">Get Geo Location</button>

<p id="getGeo"></p>

<script>
var x = document.getElementById("getGeo");

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

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

</script>

<form action="insert.php" method="post"> 
<label id="id">Location name:</label><br/>
<input type="text" name="id"><br/>
<label id="lat">Latitude:</label><br/>
<input type="text" name="lat" value="WHAT HERE??"><br/>
<label id="lng">Longitude:</label><br/>
<input type="text" name="lng" value="WHAT HERE??"><br/>
<label id="updated">Updated:</label><br/>
<input type="date" name="updated"><br/>
<br>
<button type="submit" name="save">Insert new record</button>
</form>

Answer 1

Я бы сделал это так:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
    document.getElementsByName('lat')[0].value = position.coords.latitude;
    document.getElementsByName('lng')[0].value = position.coords.longtitude;

  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

Answer 2

Кажется достаточно простым, я также добавил дату.

let myapp =  {
  x: document.getElementById("getGeo"),
  lat: document.getElementById("lat"),
  lng: document.getElementById("lng"),
  dateU: document.getElementById("updated")
};

function getLocation() {
  myapp.x.innerHTML = 'Go forit';
  let d =  new Date();
  let ds = d.toLocaleDateString('en-CA');
 // console.log(ds);
  myapp.dateU.value =ds;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  myapp.x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
  myapp.lat.value = position.coords.latitude;
  myapp.lng.value = position.coords.longitude;
  
}

function showError(error) {
  myapp.lat.value = "";
  myapp.lng.value = "";
  myapp.x.innerHTML = "Woops:  " + error.code +
    "<br>What: " + error.message;
}

<button onclick="getLocation()">Get Geo Location</button>

<p id="getGeo">xxx</p>


<form action="insert.php" method="post">
  <label id="id">Location name:</label><br/>
  <input type="text" name="id"><br/>
  <label >Latitude:</label><br/>
  <input id="lat" type="text" name="lat" value="WHAT HERE??"><br/>
  <label >Longitude:</label><br/>
  <input id="lng" type="text" name="lng" value="WHAT HERE??"><br/>
  <label >Updated:</label><br/>
  <input id="updated" type="date" name="updated"><br/>
  <br>
  <button type="submit" name="save">Insert new record</button>
</form>

Answer 3

Если я правильно понимаю ваш вопрос, вам придется использовать JS.

<script>
    document.getElementById("input1").value = position.coords.latitude;
</script>

<input id="input1" type="text" name="lat" value="WHAT HERE??"><br/>