alert（）が完了した後にフォームを送信する

Question

住所を座標に変換するためにGoogle Maps Geocoding APIを使用するいくつかのjQueryコードを使用して、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 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) { 
     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(); 
     } 
    }); 
});