Passing information from a Javascript function into a form

Question

I am trying to pass the results of position.coords.latitude and position.coords.longitude into the values of "lat" and "lng" on the form, but I have no idea how?

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

Use the same technique that you used when you set the message in the element with id `getGeo`. Try an internet search on "javascript set input value". — lurker, Apr 14 '20 at 20:02
Does this answer your question? [Set the value of an input field](https://stackoverflow.com/questions/7609130/set-the-value-of-an-input-field) — Heretic Monkey, Apr 14 '20 at 20:20

score 0 · Answer 1 · edited Apr 14 '20 at 20:20

0

If I am understanding your question correctly, you would have to use JS.

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

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

edited Apr 14 '20 at 20:20

Heretic Monkey

11,687
7
53
122

answered Apr 14 '20 at 20:05

Joe C.

397
4
15

score 0 · Answer 2 · answered Apr 14 '20 at 20:31

I'd do it like this:

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

score 0 · Answer 3 · answered Apr 14 '20 at 20:55

Seems simple enough, I added the date also.

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>

Passing information from a Javascript function into a form

3 Answers3