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设置之前提交表单外，所有内容都可以正常工作！

请问有谁可以解决我的问题吗？

提前致谢。

更新

我还尝试在提交按钮上使用onclick，在表单中使用onsubmit并使用jQuery .validator()。

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

表单提交前的Google地理编码

1 个答案: