Submit form after alert() is done

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

You need to move the submit within the callback to the geocode function. The reasoning is, it's asynchronous and not running in direct order, so it's calling the geocode and then immediately firing the submit. If you put it like below, the form will submit on callback and after the alerts (as alerts will block the thread).

$("#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) {
        // This function is async
        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();
        }
    }); 

});

Answer 2

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();
        }
    }); 


});

Answer 3

I think geocoder.geocode is an asynchronous function. Therefore you need the submit after the alert boxes.

$("#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();
        }
    });
});