Changing Hidden Values to Geolocation Values in a Form using Javascript

I am creating a search script that also pulls in the users latitude & longitude, which can also be uses as basis of the search. I achieve this by using an onLoad method that calls a javascript that should place the code into the form.

<body <?php body_class(); ?> onload="office_getLocation()">
<form name='office_address_search_home' method='post' action='http://domain.com   /address-search-test/#map' class='form-search'>
<input class='office_address_search_input_home input-medium search-query' name='office_address_search' style="height:12px;font-size: 12px;padding-top:5px;" onClick="this.value=''" value="Find Your Nearest Office" />
<input type='hidden' name='region' value='United Kingdom' />
<input type="hidden" name="office_latitude" id="office_latitude_id" value=""/>
<input type="hidden" name="office_longitude" id="office_longitude_id" value="" />
<input name='Submit' class='office_address_submit_home btn' type='submit' value='Search' style='height: 26px;line-height: 12px;' />
</form>

<script>
function office_getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
}

function showPosition(position)
{
document.getElementById("office_latitude_id").value = position.coords.latitude;
document.getElementById("office_longitude_id").value = position.coords.longitude;
}
</script>

However it doesn’t work.

I have echoed the results of showPosition(position) out (the position.coords.latitude & longitude) onto the screen and it is getting them okay, just not assigning them to the hidden values.

Any ideas? Will happily supply more data if need be.

Cheers

Hi,

The first thing I would check is scope.
Is position.coords.latitude available as a variable within the showPosition function?

If you run your script in Chrome, then the developper tools will help you identify any potential errors.
To do this open your page, press F12, click the console tab, then reload the page.

Do you see any error messages there?

I just tested this in Chrome and it seems to work just fine :slight_smile:

However…

navigator.geolocation.getCurrentPosition() can take some time to execute, which is why it has the callback function. The first time the getCurrentPosition() method is called, it took around 670ms on my PC, and I had already allowed geolocation access to the browser, when I cleared my exception list, I had to click “allow” again - so the call took almost 3 seconds. (Of course subsequent calls were faster, at around 80 - 130ms.)

(Also, I changed the fields to type=“text” to easily see if they were receiving the values.)

It’s worth noting that even if geolocation is available as a feature in the browser, that doesn’t mean that you will have access to the coordinates (for example if someone denies access to expose their location to you). When someone is asked whether they want to Allow or Deny access, and they choose Deny, the position callback for getCurrentPosition will not fire.

However…

Thankfully, you will be able to find out if that is the case. The getCurrentPosition method will also take an error handler which will expose a PositionError object that contains a code and a message.

For example, you can try pasting this in to your Chrome/Firefox debug console:


navigator.geolocation.getCurrentPosition(
    function(position){
        console.log("Position:", position);
    },
    function(posError){
        console.log("PositionError:", posError);
    }
);

If you try this on a site where you haven’t already allowed location tracking (and your settings are set to always ask you), then if you Deny access you should see the error callback executed with a message along the lines of “User denied GeoLocation”.

Further reading: http://diveintohtml5.info/geolocation.html

Morning,

I just read through the nice link @AussieJohn ; provided (if you haven’t done so, I recommend it).
In light of this, my previous answer is obviously nonsensical, so please disregard it.

Sorry for the noise.

Cheers @AussieJohn! With your help I managed to fix it.

The hidden values wouldn’t have reflected in the source code (I tested this as when changed the fields to text boxes, even though they contained the lat/long values, the source code still show no values). Should’ve trusted my instinct a little bit :smiley:

Have put more robust error checking as well. Nice share on the doc too :slight_smile: