SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Manchester UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    HTML Code:
    <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! I'm Rhys Wynne and I wrote bbPress Complete
    Author+ Premium Wordpress Plugin - Use Code FORUM10 for 10% Off!
    WP Email Capture - Build Your List From Inside Wordpress
    Follow Me on Twitter

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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?

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rhyswynne View Post
    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.
    I just tested this in Chrome and it seems to work just fine

    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:
    Code javascript:
    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Manchester UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Have put more robust error checking as well. Nice share on the doc too
    Hi! I'm Rhys Wynne and I wrote bbPress Complete
    Author+ Premium Wordpress Plugin - Use Code FORUM10 for 10% Off!
    WP Email Capture - Build Your List From Inside Wordpress
    Follow Me on Twitter


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •