表单提交前的谷歌地理代码

Google Geocode before Form Submit

本文关键字：代码 谷歌 表单提交      更新时间：2023-09-26

这个问题看起来很愚蠢，但它已经让我忙了一整天。

我想要实现的是在提交搜索表单之前使用谷歌地理编码器对地址进行地理编码

我有以下代码：

<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()。

首先，您希望阻止表单提交；否则，这可能比异步地理编码请求完成的速度更快。

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

然后，您希望将表单提交移动到地理编码响应处理程序中。

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

我想你会遇到的问题是对表单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();
    });
});
相关文章：