Question

I have some jQuery code that uses Google Maps Geocoding API to convert an address to coordinates, then use alert() to show the result in popup window. Here is the code which works fine:

$("#searchbox_form #search_button").click(function(e){
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());
        }
    }); 



});

However now I want jQuery to submit the form $searchbox_form after the user closes the alert box. However adding $("#searchbox_form").submit(); at the end of the code chunk submits the form before the alert box shows up. This also causes the form to be submitted before the Google Maps geocoder returns the result.

How can I allow the geocoder to return the result before the form gets submitted?

Same as the code above, but with 1 additional line to submit form at the end:

$("#searchbox_form #search_button").click(function(e){
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());
        }
    }); 

    $("#searchbox_form").submit();  //THIS IS THE ADDED LINE OF CODE!!

});

Answer 1

Why don’t you just submit it after you’re done with your callback?

$("#searchbox_form #search_button").click(function(e){
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());
            $("#searchbox_form").submit();
        }
    }); 


});