little manipulation to a ( javascript + html ) code

Question

hi everybody I hope you are well,

here is my code:

var x = document.getElementById('geo_output');
//x.innerHTML = "here is geo_output";   	
function getLocation()
{
  if(navigator.geolocation)
    {
      //x.innerHTML = "Supporting";
      navigator.geolocation.getCurrentPosition(showPosition);
    }
  else
    {
      x.innerHTML = "Browser not Supporting";
    }
}

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

$('#geo_output').click(getLocation)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<h1>trace your location</h1>	
	<button onClick="getLocation()">Get Location</button>	
  <div id="geo_output">
  </div>
  <br>	<br>	<br>	<br>	<br>	
  <div id="form_output">
    <form action="includes/signup.php" method="POST">
    <input type="text" name="lat" placeholder="latitude">
    <br>
    <input type="text" name="lon" placeholder="longitude">
    <br>
    <input type="text" name="id" placeholder="id">
    <br>
    <input type="text" name="name" placeholder="first_name">
    <br>
    <input type="text" name="address" placeholder="address">
    <br>
    <input type="text" name="description" placeholder="description">
    <br>
    <button type="submit" name="submit"> envoyer </button>
  </div>

when i execute it , it gives me a correct result.

but i want to know how to do that, when i click on the button gate location, the latitude and longitude will be inserted directly and automatically into their <input>

<input type="text" name="lat" placeholder="latitude">
<br>
<input type="text" name="lon" placeholder="longitude">

thank you friends

Give them an id in the html, find them with getElementById and set their value property. — Federico klez Culloca
– Federico klez Culloca, Commented Mar 7, 2018 at 11:07

Ricardo Pontual · Accepted Answer · 2018-03-07 11:10:48Z

1

To select the right input, give it an ID:

<input id="latitude" type="text" name="lat" placeholder="latitude">
<br>
<input id="longitude" type="text" name="lon" placeholder="longitude">

And in showPosition function:

document.getElementById('latitude').value = position.coords.latitude;
document.getElementById('longitude').value = position.coords.longitude;

answered Mar 7, 2018 at 11:10

Ricardo Pontual

3,7573 gold badges30 silver badges46 bronze badges

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

5 Comments

stackoverstudent Over a year ago

how we can make it in android ?? have you any information about that sir ??

Ricardo Pontual Over a year ago

do you use any tool/framework, like ionic or cordova/phonegap?

stackoverstudent Over a year ago

no sir , it's just android java , in android studio

Ricardo Pontual Over a year ago

In Android there is the LocationListener class which you can you use to get location information. This a related question: stackoverflow.com/q/1513485/4730201

stackoverstudent Over a year ago

thank you sir ,..sorry sir i wanna ask you again because i'm really curious a lot exactly about the action that when i click on the button , the result will be inserted directly and automatically into their <input> how i can do it in the android??

Jacques Ramsden · Accepted Answer · 2018-03-07 11:11:08Z

1

Change the element to have an ID like this

<input type="text" id="lat" id="lat" placeholder="latitude">

Then in JS code do the following

 document.getElementById('lat').value = position.coords.latitude;

And the same for the longitude

answered Mar 7, 2018 at 11:11

Jacques Ramsden

8716 silver badges22 bronze badges

2 Comments

stackoverstudent Over a year ago

sir i wanna ask you again because i'm really curious a lot exactly about the action that when i click on the button , the result will be inserted directly and automatically into their <input> how i can do it in the android??? any ideas or articles who will help me ????

Jacques Ramsden Over a year ago

Hi @stackoverstudent, I'm not sure how this will be done in Android. I assume it would have the same effect. I would suggest asking another question and others should answer. Sorry I can't answer this for you.

Collectives™ on Stack Overflow

little manipulation to a ( javascript + html ) code

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related