提交表單提交前的Google地址解析

Question

這似乎是一個愚蠢的問題，但它讓我忙了一整天。

我想實現的是在提交我的搜索表單之前使用Google Geocoder地址解析地址。

我有以下代碼：

<form name="myForm" id="myForm"> 
    <input type="text" name="address" id="address" /> 
    <input type="hidden" name="lat" id="lat" /> 
    <input type="hidden" name="lng" id="lng" /> 
    <input type="submit" name="submit" /> 
</form> 


$('#myForm').submit(function(){ 
    var a = $('#address').val(); 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({"address" : a }, function(result, status){ 
     // Extract latitude and longitude 
     $('#lat').val(latitude); 
    }); 
}); 

一切正常，因爲它應該，除了形式lat之前提交，並lng設置！

任何人都可以請擺脫我的問題，請光？

在此先感謝。

更新：

我在形式和jQuery .validator()提交按鈕使用onclick，onsubmit也試過。

Answer 1

首先，你想停止表單提交發生;否則這可能比異步地理編碼請求完成的速度更快。

$('#myForm').submit(function(event){ 
    event.preventDefault(); 
    ... 
}); 

然後，您想要將表單提交移動到地理編碼響應處理程序。

geocoder.geocode({"address" : a }, function(result, status){ 
    ... 
    $('#myForm').submit(); 
}); 

那麼你會有問題，我想是遞歸調用表單提交。所以相反，我會說你的事件處理程序不在表單提交，但在提交按鈕點擊（這可能是一個更乾淨的方式）。防止提交按鈕的默認操作，但仍然允許我們提交表單。

<input type="submit" name="submit" id="submitButton" /> 

$('#submitButton').on('click', function(event){ 
    event.preventDefault(); 
    var a = $('#address').val(); 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({"address" : a }, function(result, status){ 
     // Extract latitude and longitude 
     $('#lat').val(latitude); 
     $('#myForm').submit(); 
    }); 
});