async issues with form submission following client-side geocoding - form always submits even if validate function returns false

Question

I want to submit a form once I've gotten requested geocoding results from user-side geocoding call to the google api:

var geocoder;
geocoder = new google.maps.Geocoder();

function codeAddress(address, form) {

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert(results[0].geometry.location);

            document.getElementById("latitude").value = location[0];
            document.getElementById("longitude").value = location[1];
            return validate2(form);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

EDIT: as per request here is the code for the other 2 functions:

<form method='post' action='profile.php' onSubmit='return validate(this)' name='signup'>

onSubmit calls validate(form) which calls the geocode function:

function validate(form)
{
return codeAddress(form.streetNumN.value +" " +form.streetN.value+" "+form.streetTypeN.value+", "+form.cityN.value +", "+form.stateN.value+" "+form.zipN.Value, form);
}

function validate2(form)
      {var fail = !form.firstNameN.value + !form.lastNameN.value +  !form.phoneN.value +  !form.emailN.value + !form.passN.value + !form.pass2N.value  + !form.emailN.value + !form.streetNumN.value + !form.streetN.value +  !form.streetTypeN.value + !form.cityN.value + !form.stateN.value + !form.zipN.value; 

     if(form.firstNameN.value.length == 0)
         {
         document.getElementById("firstNameP").innerHTML="Please enter your first name.";
         }       

         if(form.lastNameN.value.length == 0)
         {
         document.getElementById("lastNameP").innerHTML="Please enter your last name.";
         }
    ...etc...
    if(fail>0)
    return false;
    else 
    return true;            
    }

validate2(form) makes sure all fields are filled and then returns true if form is filled properly or false otherwise.

Using validate(form) to simply return validate2(form) works fine. But using validate(form) to return geocode(...) which is suppose to call validate2(form) in its completion tasks has problems....the form just submits without waiting for the geocode or for validate2(form) to return.

What does stop form submission is to have the codeAddress function return false

var geocoder;
  geocoder = new google.maps.Geocoder();

function codeAddress(address, form) {

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        alert(results[0].geometry.location);
alert('hi from geocode completion');
document.getElementById("latitude").value = results[0].geometry.location[0];
document.getElementById("longitude").value = results[0].geometry.location[1];
//return false;
return validate2(form);
   } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
return false;
}

in the main body apart from the completion handler. So I think this function must be returning before the completion handler runs, hence form is submitted. How can I stop this function from returning? (I've also tried just running the functions rather than writing them as returns. So that only the validate2(form) function returns at the end. In this case everything has time to run but the form submits regardless of what validate2(form) actually returns.

What I am trying to do is done often. Not sure why I can't find a template, if anyone has some sample code or recommendations to find sample code, that would be much appreciated.

I'm surprised validate2() runs at all... why on earth do you have two return statements one after the other? — JammGamm, Jan 31 '15 at 03:36
@JammGamm Ooops the return false is commented out when I run it. Will delete that run. — Beeb, Jan 31 '15 at 04:15
@LynHeadley yes my other code validate2 returns true or false depending on whether the form fields are filled in. I was hoping this combo would call it only after geocode api returns. — Beeb, Jan 31 '15 at 04:17
The code in the callback will only be executed once the results are ready. I'd say that your error lies elsewhere. It would be helpful to see your validate2 function and relevant html. — JammGamm, Jan 31 '15 at 04:21
You can't return data from the callback function. You need to _use_ it in the callback function (when it is available). — geocodezip, Jan 31 '15 at 06:15
possible duplicate of [Why is my variable unaltered after I modify it inside of a function?](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — geocodezip, Jan 31 '15 at 06:17
@geocodezip I use the data by passing it to another function. Isn't that perfectly valid? If I can pass the location to an alert why can't I pass the form to a custom function? Seems equivalent to me, and is working (see my edits). It's not a matter of data, it's something about the asynchronous completion block still executing after the function returns. How do I get the function to not return until after the completion block has executed? This has nothing to do with the SO post you referenced. — Beeb, Jan 31 '15 at 13:32
@JammGamm I understand this. I suppose my question is how to get the codeAddress function to entirely hold off returning anything until that point when the data is ready? This seems standard, but so far I have only found a jquery solution. I'd like to stick with simple completion handlers if possible. — Beeb, Jan 31 '15 at 13:34

JammGamm · Accepted Answer · 2015-01-31T18:16:37.887

how to get the codeAddress function to entirely hold off returning anything until that point when the data is ready?

You need to put your code in the anonymous callback function that you are supplying to the geocode function. At that point in time all of the geocoding data that google is going to return is 100% ready. It explicitly calls the callback function that you have supplied, passing it the results and status arguments.

It looks like, for the most part, this is what you're doing. In the second snippet of your codeAddress function, you have a stray "return false", that will indeed cause that function to return prematurely, and should cause the form submit to fail every time (if the rest of your code is functioning as you intend).

Also, if you are trying to retrieve the latitude and longitude values from a result, your calls should be:

document.getElementById("latitude").value = results[0].geometry.location.lat() 
document.getElementById("longitude").value = results[0].geometry.location.lng()

Here's a fiddle (mostly forked from elsewhere) that hopefully answers some of these questions and clarifies when results are available:

http://jsfiddle.net/q7f6mpxz/3/

async issues with form submission following client-side geocoding - form always submits even if validate function returns false

1 Answers1