Adding an id code into input value

Question

I have this html code for displaying geolocation :

<span id="currentLat"></span>, <span id="currentLon"></span>

combined with javascript code it works perfectly. The problem is i want to display above value in a textfield.

I did try :

<input id="" value="<span id="currentLat"></span>, <span id="currentLon"></span>" size="30" />

but it give me error. How i add the value into the textfield value?

NB:

I add the javascript code used to know exactly what's wrong with the code, but maybe the code cannot be working in the text input field.

<script>
      window.onload = function() {
        var startPos;

        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            startPos = position;
            document.getElementById("startLat").innerHTML = startPos.coords.latitude;
            document.getElementById("startLon").innerHTML = startPos.coords.longitude;
          }, function(error) {
            alert("Error occurred. Error code: " + error.code);
            // error.code can be:
            //   0: unknown error
            //   1: permission denied
            //   2: position unavailable (error response from locaton provider)
            //   3: timed out
          });

          navigator.geolocation.watchPosition(function(position) {
            document.getElementById("currentLat").innerHTML = position.coords.latitude;
            document.getElementById("currentLon").innerHTML = position.coords.longitude;
            document.getElementById("distance").innerHTML =
              calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                                position.coords.latitude, position.coords.longitude);
          });
        }
      };

      // Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
      // http://www.movable-type.co.uk/scripts/latlong.html
      // Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
      function calculateDistance(lat1, lon1, lat2, lon2) {
        var R = 6371; // km
        var dLat = (lat2-lat1).toRad();
        var dLon = (lon2-lon1).toRad();
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        return d;
      }
      Number.prototype.toRad = function() {
        return this * Math.PI / 180;
      }
    </script>

try single quotes? value=", " — roullie
– roullie, Commented Jun 1, 2015 at 6:07
You id attribute is missing the double quotes. Change to this: <input id="" value=", " size="30" /> — Danish Bhayani
– Danish Bhayani, Commented Jun 1, 2015 at 6:17
sorry forgot to add thhe double quotes, just edit the code. Your code indeed adding the code to input field but the javascript function not working — user2552872
– user2552872, Commented Jun 2, 2015 at 15:16

user786 · Accepted Answer · 2015-06-01 06:23:20Z

1

Updated see the running code

<input value='<span id=\"currentLat\"></span>, <span id=\"currentLon\"></span>' size="30" />

 <input value="<span id='currentLat'></span>, <span id='currentLon'></span>" size="30" />

And if you want to set width and height then it should be

  style="height:100px;width:200px"

edited Jun 1, 2015 at 6:23

answered Jun 1, 2015 at 6:08

user786

4,4406 gold badges53 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

roullie Over a year ago

like the comment above by Danish Bhayani. please test your code first before commenting

user2552872 Over a year ago

The code added into the text field but the javascript function not working, no latitude and longitude value appear.

pavel · Accepted Answer · 2015-06-01 06:08:07Z

0

You have there typos (unclosed quotes at ID attribute). Than you need to set just span's content, not whole elements.

<input id="result" value="" size="30" />

<script>

var res = document.getElementById('result');
var lat = document.getElementById('currentLat');
var lon = document.getElementById('currentLon'); 

res.value = lat.innerText + ', ' + lon.innerText;

</script>

https://jsfiddle.net/zc7pLcoq/

answered Jun 1, 2015 at 6:08

pavel

27.3k11 gold badges47 silver badges63 bronze badges

1 Comment

user2552872 Over a year ago

i try the snipet above but it only generate the comma value ( , )

Sougata Bose · Accepted Answer · 2015-06-01 06:09:37Z

0

You need to escape them properly -

<input value='<span id="currentLat"></span>, <span id="currentLon"></span>'>

Fiddle

answered Jun 1, 2015 at 6:09

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

1 Comment

user2552872 Over a year ago

same, the code added into the field but the javascript function not working

Collectives™ on Stack Overflow

Adding an id code into input value

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related