alert（）完成后提交表單

Question

我有一些jQuery代碼，這些代碼使用Google Maps Geocoding API將地址轉換為坐標，然后使用alert()在彈出窗口中顯示結果。 這是正常工作的代碼：

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



});

但是現在我希望jQuery在用戶關閉警報$searchbox_form后提交$searchbox_form表單。 但是添加$("#searchbox_form").submit(); 在代碼塊的末尾，將在警報框出現之前提交表單。 這也將導致在Google Maps地理編碼器返回結果之前提交表單。

如何允許地理編碼器在提交表單之前返回結果？

與上面的代碼相同，但在末尾還有1行提交表單：

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

您需要將回調內的提交移至地址解析功能。 原因是，它是異步的且未按直接順序運行，因此它先調用地理編碼，然后立即觸發提交。 如果按如下所示放置，則表單將在回調和警報之后提交（因為警報將阻止線程）。

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

完成回調之后，為什么不提交它呢？

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

我認為geocoder.geocode是一個異步函數。 因此，您需要在警報框后提交。

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