Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript How do I insert this in a Input Text

R

rudva

New Coder
Hi there,

I am trying to get the browser device location using Javascript, then I'll to insert latitude and longitude in two different Input Text fields. Everything is working great to get the actual location but I can't insert the values on TXTloclat and TXTloclon. Any recommendation? I can't see why is not working. I Already try many ways but nothing. Javascript is not my best languaje, I'm learning now.

This is my code:
Code: 
<html>
<body>
<h1>HTML Geolocation</h1>
<p>Click the button to get your coordinates.</p>

<p id="demo" align="center">
<form id="form1" name="form1" method="post">
    <h1 align="center" ><?php echo date('h:i a') ?></h1>
    <div align="center">
        <?php echo date('m-d-Y');?>
        <br>
        
        <input type="text" name="TXTloclat" id="TXTloclat"><input type="text" name="TXTloclon" id="TXTloclon">
        <br>
        
        <input type="text" name="TXT_pin" id="TXT_pin" onfocus="getLocation()" align="center">
        <br>
        <button id="Submit" value="Submit">Clock</button>
    </div>
</form>
</p>
    
<script>
const x = document.getElementById("demo");
const lat = document.getElementById("TXTloclat");
const lon = document.getElementById("TXTloclon");

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;
    
 lat.innerHTML = " value='" + position.coords.latitude + "' ";
 lon.innerHTML = " value='" + position.coords.longitude + "' ";
}
</script>

</body>
</html>

Thank you for your help.
 
Sort by date Sort by votes
rudva said:
Hi there,

I am trying to get the browser device location using Javascript, then I'll to insert latitude and longitude in two different Input Text fields. Everything is working great to get the actual location but I can't insert the values on TXTloclat and TXTloclon. Any recommendation? I can't see why is not working. I Already try many ways but nothing. Javascript is not my best languaje, I'm learning now.

This is my code:
Code: 
<html>
<body>
<h1>HTML Geolocation</h1>
<p>Click the button to get your coordinates.</p>

<p id="demo" align="center">
<form id="form1" name="form1" method="post">
    <h1 align="center" ><?php echo date('h:i a') ?></h1>
    <div align="center">
        <?php echo date('m-d-Y');?>
        <br>
       
        <input type="text" name="TXTloclat" id="TXTloclat"><input type="text" name="TXTloclon" id="TXTloclon">
        <br>
       
        <input type="text" name="TXT_pin" id="TXT_pin" onfocus="getLocation()" align="center">
        <br>
        <button id="Submit" value="Submit">Clock</button>
    </div>
</form>
</p>
   
<script>
const x = document.getElementById("demo");
const lat = document.getElementById("TXTloclat");
const lon = document.getElementById("TXTloclon");

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;
   
 lat.innerHTML = " value='" + position.coords.latitude + "' ";
 lon.innerHTML = " value='" + position.coords.longitude + "' ";
}
</script>

</body>
</html>

Thank you for your help.
Click to expand...
Hi there,
What you're looking for looks something like this:

JavaScript: 
var input = document.querySelector('#idOfInput');
input.value = "your text";
 
Upvote 0 Downvote
Antero360 said:
Hi there,
What you're looking for looks something like this:

JavaScript: 
var input = document.querySelector('#idOfInput');
input.value = "your text";
Click to expand...
Hey!
#idOfInput means the name of the Input Texts form fields?

Then I can put something like?
Code: 
var input = document.querySelector('#TXTloclat');
input.value = position.coords.latitude;
 
Upvote 0 Downvote
rudva said:
Hey!
#idOfInput means the name of the Input Texts form fields?

Then I can put something like?
Code: 
var input = document.querySelector('#TXTloclat');
input.value = position.coords.latitude;
Click to expand...
Hey there,
So what I was going for was the attribute called id you have on your input there, but you could also grab the input field with any other attribute by using the attribute selector like so:
JavaScript: 
var input = document.querySelector('input[name="valueOfNameAttribute"]');
<input type="text" name="TXTloclat" id="TXTloclat">
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Antero360 said:
Hey there,
So what I was going for was the attribute called id you have on your input there, but you could also grab the input field with any other attribute by using the attribute selector like so:
JavaScript: 
var input = document.querySelector('input[name="valueOfNameAttribute"]');
<input type="text" name="TXTloclat" id="TXTloclat">
Click to expand...
Thanks,
But your recommendations are not working... I already try a lot of things. I just want to get the longitude and latitude into a form INPUT TEXT field for each value and nothingis working... I already get the values but I just can't insert those into the input type text value.
 
Upvote 0 Downvote
Antero360 said:
Hey there,
So what I was going for was the attribute called id you have on your input there, but you could also grab the input field with any other attribute by using the attribute selector like so:
JavaScript: 
var input = document.querySelector('input[name="valueOfNameAttribute"]');
<input type="text" name="TXTloclat" id="TXTloclat">
Click to expand...
This definitely works lol. I've done this at my job for ages, so I can tell you this definitely works
 
Upvote 0 Downvote
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    </head>
<body>
<h1>HTML Geolocation</h1>
<!--p>Click the button to get your coordinates.</p-->

<p id="demo" align="center">
<form id="form1" name="form1" method="post">
    <h1 align="center" ><?php echo date('h:i a') ?></h1>
    <div align="center">
        <?php echo date('m-d-Y');?>
        <br>
        
        <input type="text" name="TXTloclat" id="TXTloclat"><input type="text" name="TXTloclon" id="TXTloclon">
        <br>
        
        <input type="text" name="TXT_pin" id="TXT_pin" align="center" placeholder="Click here to get your coords">
        <br>
        <button id="Submit" value="Submit">Clock</button>
    </div>
</form>
</p>
    
<script>
const x = document.getElementById("demo"),
      lat = document.getElementById("TXTloclat"),
      lon = document.getElementById("TXTloclon")
      pin = document.querySelector('#TXT_pin');

pin.addEventListener('mouseup', getLocation);

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

function showPosition(position) {
 x.innerHTML = `<div>Latitude: ${position.coords.latitude}</div><div>Longitude: ${position.coords.longitude}</div>`;
 lat.value = position.coords.latitude;
 lon.value = position.coords.longitude;
}
</script>

</body>
</html>
 
Upvote 1 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom