Jump to content
oldinfo

Having latitude and longitude button to fill input boxes

Recommended Posts

Hi folks, as the lovely HTML5 coming and proving that it's an unbelievable language , I found the new technique "Geolocation" very helpful to my project. as a part of my project, I have a simple form gathering info from the user such as name , email andthe latitude and longitude of the user's position. In w3schools's example , the latitude and longitude are returned as normal text above each other :Latitude: 00.0000Longitude: 00.0000 ( not really zeros :) ) my question is: after clicking on a button (say get location) , the latitude and longitude coords will be automatically inserted (filled) into 2 input boxes ( visible or hidden ) to be sent to the database after submitting the Form . is it something to do with innerHTML ? how to do that ?

<form action="handle_form.php" method="post"> <p>Name: <input type="text" name="name" size="20" /></p> <p>Email Address: <input type="text" name="email" size="20" /></p> <p id="demo">Click the button to get your coordinates:</p><button onclick="getLocation()">Try It</button><script>var x=document.getElementById("demo");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>

the geolocation part code from here:http://www.w3schools...ml5_geolocation

Edited by oldinfo

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...