Отправить форму после оповещения ()

Question

У меня есть некоторый код jQuery, который использует API геокодирования Карт Google для преобразования адреса в координаты, затем используйте 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").submit(); в конце фрагмента кода отправляет форму до появления окна предупреждения. Это также приводит к отправке формы за до , когда геокодер Карт Google возвращает результат.

Как разрешить геокодеру вернуть результат до отправки формы?

То же, что и код выше, но с 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();
        }
    });
});