Javascript asynchronous issue

Question

I have a simple javascript function that checks whether the user has input values in the City and State input elements, and if they did, geocodes the city and state and then sets two other inputs in the form (lat and long) and should return true if it succeeded or false if otherwise. The problem I am running into is that when it calls the geocoder.geocode, javascript just skips over it and hits the bottom. I know that javascript is asynchronous so it's calling the geocode, then keeps going but hits the end of the function so it just returns nothing instead of returning something from the geocode call. This function is being used by an "onsubmit" for a form so I need it to return true when everything works properly but false when it doesn't to stop the form from being submitted. How do you write a function in javascript that returns a boolean but has to call another function?

function geocodeVerification()
{
    if($("#userCity").val() && $("#userState").val())
    {
        var geocodeLocation = $("#userCity").val() + "," + $("#userState").val();
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({'address':geocodeLocation},function(results,status)
        {
            if(status == google.maps.GeocoderStatus.OK)
            {
                console.log("Entered OK status");
                $("#locationLat").val(results[0].geometry.location.lat());
                $("#locationLong").val(results[0].geometry.location.lng());
                console.log("Setting Lat and Long");
                console.log("Lat: "+ results[0].geometry.location.lat());
                console.log("Long: "+ results[0].geometry.location.lng());
                return true;
            }
            else if(status == google.maps.GeocoderStatus.INVALID_REQUEST)
            {
                console.log("Entered INVALID_REQUEST status");
                alert("An invalid request was sent. Please check the city/state for errors");
                return false;
            }
            else if(status == google.maps.GeocoderStatus.ERROR)
            {
                console.log("Entered ERROR status");
                alert("There was a problem contacting the Google Servers");
                return false;
            }
            else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
            {
                console.log("Entered OVER_QUERY_LIMIT status");
                alert("The query limit has been reached. Please wait a minute and try again.");
                return false;
            }
            else if(status == google.maps.GeocoderStatus.REQUEST_DENIED)
            {
                console.log("Entered REQUEST_DENIED status");
                alert("Request was denied. This webpage is not allowed to use the geocoder");
                return false;
            }
            else if(status == google.maps.GeocoderStatus.UNKNOWN_ERROR)
            {
                console.log("Entered UNKNOWN_ERROR status");
                alert("A geocoding request could not be processed due to a server error. The request may succeed if you try again");
                return false;
            }
            else if(status == google.maps.GeocoderStatus.ZERO_RESULTS)
            {
                console.log("Entered ZERO_RESULTS status");
                alert("Geocoding " + geocodeLocation +" has returned no results, please check for errors and try again.");
                return false;
            }
            else
            {
                console.log("defaulted out");
                return false;
            }
        });
    }
    else
    {
        alert("City and/or State values are incorrect");
        return false;
    }
}

You cannot do this in an asynchronous context in JavaScript. Your API has to expose the asynchronous behavior and allow a callback to be passed in. — Pointy, Dec 11 '13 at 21:12
So it's not possible to have a function called from the "onsubmit" of a form be dependent on another function call? — Leveticus, Dec 11 '13 at 21:15
Not directly, no. You'd have to prevent the default submit behavior, and then you *could* force the submit in the callback to the asynchronous function if there aren't errors. — Pointy, Dec 11 '13 at 21:17
That's what I ended up doing. Instead of calling the geocodeVerification() in the "onsubmit" of the form. I just changed the "Submit" button to be a normal button that calls geocodeVerification(), and instead of returning a boolean, it calls $("#form").submit() if it was successful. It seems to be working now. Thanks for the help! — Leveticus, Dec 11 '13 at 21:31
It does have ERROR - https://developers.google.com/maps/documentation/javascript/reference#GeocoderStatus — Edwin Daniels, Nov 30 '15 at 19:26

score 0 · Accepted Answer · answered Dec 11 '13 at 21:49

0

Ended up changing the way geocodeVerification was called. Instead of being called from the form "onsubmit", I changed the submit button to call the function and inside the function called the .submit of the form and it's working.

answered Dec 11 '13 at 21:49

Leveticus

33
1
7

Javascript asynchronous issue

1 Answers1