Mikki Sørensen Mikki Sørensen - 3 months ago 60
HTML Question

How to get geolocation and return value in html form

How do I get Geolocation and return it into a form when I click on a button.

So when click the Geolocation get my location and then return the output in the from so I can use it later on.
http://jsfiddle.net/Mikki10/as3mg177/1/

Geolocation

<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Get geolocation and put into from</button>
<p id="demo"></p>
<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 action="geo/ruteplanlag.php" method="get">
<input style="width: 98%; margin: 20px auto; text-align: center;" name="startadr" type="text" value="(Custom value like Orlando or geolocation) " />
<input style="width: 98%; margin: 20px auto; text-align: center;" name="slutadr" type="text" value="Miami" />
<div class="buttonHolder">
<input type="submit" value="Start ruteplanlægning">
</div>
</form>
</body>
</html>

Answer

I now got the working code. http://jsfiddle.net/Mikki10/gs5ed5sc/1/

    <script type="text/javascript">
    function getLocationConstant() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
        } else {
            alert("Your browser or device doesn't support Geolocation");
        }
    }

    // If we have a successful location update
    function onGeoSuccess(event) {
        document.getElementById("Latitude").value = event.coords.latitude;
        document.getElementById("Longitude").value = event.coords.longitude;
        document.getElementById("Position1").value = event.coords.latitude + ", " + event.coords.longitude;

    }

    // If something has gone wrong with the geolocation request
    function onGeoError(event) {
        alert("Error code " + event.code + ". " + event.message);
    }
</script>
<form action="geo/ruteplanlag.php" method="get">
    <div id="divSample" class="hideClass">Latitude:
        <input type="text" id="Latitude" name="Latitude" value="">
        <br>
        <br>Longitude:
        <input type="text" id="Longitude" name="Longitude" value="">
        <br>
    </div>
    <br>Position
    <input type="text" id="Position1" name="Position1" value="Miami">
    <br>
    <br>
    <input type="button" value="Get Location" onclick="getLocationConstant()" />
    <br>
    <br>
    <input type="submit" value="Add GPS Location" class=small>
</form>