提交表单后提交表单

Question

我有一些jQuery代码使用Google地图地理编码API将地址转换为坐标，然后使用alert()在弹出窗口中显示结果。这里是一个正常工作的代码：我希望jQuery用户关闭提示框后，提交表单$searchbox_form

$("#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();将在警告框出现之前提交表单。这也会导致表单在之前提交谷歌地图地理编码器返回结果。

如何让地理编码器在提交表单之前返回结果？

同上面的代码，但与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) { 
     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) { 
     // 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 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(); 
     } 
    }); 
});