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!!

});

Related to this question: http://stackoverflow.com/questions/436608/can-you-wait-for-javascript-callback — Rystraum, Jun 23 '11 at 15:45

score 4 · Answer 1 · answered Jun 23 '11 at 15:40

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

});

thanks, it works now. Didnt know its asynchronous... any suggestion where i can read up more about this? And how do you know that its asynchronous? — Nyxynyx, Jun 23 '11 at 15:43
On understanding callbacks in general? http://en.wikipedia.org/wiki/Callback_(computer_programming) — Robert, Jun 23 '11 at 15:43
As far as knowing it's asynchronous, you're hitting a Google product and waiting for a response. If it was synchronous nothing else would happen on the Javascript thread until it got the response. While it's certainly possible to make any connection synchronous, it's a bad idea. — Robert, Jun 23 '11 at 15:47

score 2 · Accepted Answer · answered Jun 23 '11 at 15:40

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


});

score 1 · Answer 3 · answered Jun 23 '11 at 15:41

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

Submit form after alert() is done

3 Answers3