How to get longitude and latitude of my current location and display on two separate HTML form

Question

Can anyone help with getting my current longitude and latitude on-click of a button, and display on two separate input form in HTML. Below is what my form will be like and on click of the "Get" button it will get my current LNG and LAT then display on forms 1 and 2.




<form>  


<button onclick="onFormSubmit()">GET CURRENT LOCATION</button>


<script>
function onGeoSuccess (position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        // NEXT 2 LINES WILL SET VALUE OF RESPECTIVE INPUTS
        document.getElementById('lat').value = lat;
        document.getElementById('lng').value = long;

        // MAKE API CALL HERE, OR ANY OTHER NEXT STEPS
    }

    function onGeoError (err) {
        console.error("Error while trying to get position", err);
    }

    function onFormSubmit () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
        } else {
            alert('GeoLocation not supported or not allowed');
        }
    }</script>

              <div class="form-group">
                <input type="text" name="lat" class="form-control" id="lat" placeholder="Your Latitude" data-msg="Please enter your latitude">
                <div class="validate"></div>
              </div>

<div class="form-group">
                <input type="text" name="lng" class="form-control" id="lng" placeholder="Your Longitude" data-msg="Please enter your Longitude">
                <div class="validate"></div>
              </div>

              <div class="form-group">
                <input type="text" name="subject" class="form-control" id="contact-subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject">
                <div class="validate"></div>
              </div>

</form>

score 0 · Accepted Answer · edited Dec 06 '20 at 17:43

0

This can be done using some simple JavaScript:

/* Add an onsubmit method to your form */
<form onsubmit="onFormSubmit()">
/*...*/

function onGeoSuccess (position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    // NEXT 2 LINES WILL SET VALUE OF RESPECTIVE INPUTS
    document.getElementById('lat').value = lat;
    document.getElementById('lng').value = long;

    // MAKE API CALL HERE, OR ANY OTHER NEXT STEPS
}

function onGeoError (err) {
    console.error("Error while trying to get position", err);
}

function onFormSubmit () {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
    } else {
        alert('GeoLocation not supported or not allowed');
    }
}

edited Dec 06 '20 at 17:43

Wai Ha Lee

8,598
83
57
92

answered Dec 06 '20 at 05:05

Ayushya

364
1
8

I followed your guide but LAT and LNG didn't show on my input, have updated my code above so you can see. – mideveloper Dec 06 '20 at 05:17
@mideveloper lots of things wrong with the code you updated - please try to provide cleaner and properly formatted code in the future. You can see a [working example here](https://repl.it/@ayushyamitabh/NiceNecessarySnake#index.html) run this separately it might not work on the website itself as it's embedded – Ayushya Dec 06 '20 at 05:28
"Error while trying to get position". That is the error I got when I tried to run your code – mideveloper Dec 06 '20 at 05:32
I can guarantee the code works. Don't run it there, copy it to your file and then open it. For example - copy the code there to `index.html` and then open `index.html` in Chrome. When you click the button it will ask for permission to location. – Ayushya Dec 06 '20 at 05:36
Nope, geolocation is a browser API, you can [see compatible browsers here in docs](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API#Browser_compatibility) – Ayushya Dec 06 '20 at 06:09
For some reason, the permission didn't pop up on my browser. I tried on my mobile device it pops up for some milliseconds and disappeared. – mideveloper Dec 06 '20 at 06:16
I checked my browser permission and set the location to allow but it will show the LAT and LNG in a flash and disappear. – mideveloper Dec 06 '20 at 06:44

How to get longitude and latitude of my current location and display on two separate HTML form

1 Answers1