Javascript asynchronous issue [duplicate]

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
– Pointy, Commented Dec 11, 2013 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
– Leveticus, Commented Dec 11, 2013 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
– Pointy, Commented Dec 11, 2013 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
– Leveticus, Commented Dec 11, 2013 at 21:31
It does have ERROR - developers.google.com/maps/documentation/javascript/… — Edwin Daniels
– Edwin Daniels, Commented Nov 30, 2015 at 19:26

Leveticus · Accepted Answer · 2013-12-11 21:49:36Z

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, 2013 at 21:49

Leveticus

331 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript asynchronous issue [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related