How to put the coordination generated in Javascript into html form?

Question

I am very new to Javascript. I am trying to put geo coordination directly into html form input field. From w3school, I learned how to generate user latitude and longitude Coordination and now I want to insert them directly into html input field. Here is the code:

var x = document.getElementById("dd");
var y = document.getElementById("da");

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

  function postLocation(x) {
    document.getElementById("ddd").value = x;
  }
}

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

<html>
<body onload="getLocation()">
  <p>Click the button to get your coordinates.</p>

  <form>
    <label for="fname">First name:</label><br>
    <input type="text" id='' name="fname" value=""><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value=""><br><br>
    <input type="submit" value="Submit">
  </form>

  <p><strong>Note:</strong> The geolocation property is not supported in IE8 and earlier versions.</p>
  <p id="dd"></p>
  <p id="da"></p>
</body>

</html>

Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — tevemadar, Apr 04 '22 at 08:10
Use the value attribute for the input. I.g. document.querySelector('#lname').value = x; — chri3g91, Apr 04 '22 at 08:10
When the `var x = document.getElementById("dd");` line runs, the `` doesn't exist yet, so `x` is going to be `null` (`y` too). If you need them multiple locations, put `var x,y;` on top level, but initialize them in `getLocation()`. — tevemadar, Apr 04 '22 at 08:13

score 1 · Answer 1 · answered Apr 04 '22 at 08:09

if you want to change the input value from js use the input "value" property. check the code snippet:

const input = document.querySelector('input');
const button= document.querySelector('button');

button.addEventListener('click',()=>input.value=Math.random());

<input type="text" placeholder="lat..."/>
<button>updateField</button>

score 1 · Accepted Answer · answered Apr 04 '22 at 08:10

add some hidden input to your form like this :

<form>
    <label for="fname">First name:</label><br>
    <input type="text" id='' name="fname" value=""><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value=""><br><br>
    <input type="hidden" id='lang' name="lang" value="">
    <input type="hidden" id='lat' name="lat" value="">
    <input type="submit" value="Submit">
  </form>

then in your javascript do this :

function showPosition(position) {
  document.getElementById("lat").value = position.coords.latitude;
  document.getElementById("lang").value = position.coords.longitude;
  x.innerHTML = "Latitude: " + position.coords.latitude;
  y.innerHTML = "Longitude: " + position.coords.longitude;
}

Thanks a lot. Your answer really helped me a lot. This solution is working. I just had to update the showPosition function and it worked brilliantly. — azowad, Apr 04 '22 at 08:26

How to put the coordination generated in Javascript into html form?

2 Answers2