Question

我正在使用jQuery表单插件在提交表单之前调用函数。此函数调用google geocoder service，查找地址的坐标，并在表单中设置隐藏坐标字段的值。似乎在beforeSubmit回调完成之前提交了表单。这是正常的吗？表单是否应该等待beforeSubmit回调完成？最好的方法是什么？

由于

的javascript

$(function(){
    $("#submit").click(function() {  
        var options = { 
            beforeSubmit:  getPosition,  // pre-submit callback 
            success:       showResponse  // post-submit callback             
        }; 

        // bind form using 'ajaxForm' 
        $('#addresto').ajaxForm(options); 
    });  
});

function getPosition() {

    var geocoder =  new GClientGeocoder();

    var country = $("#id_country").val();
    var city = $("#id_city").val();
    var postal_code = $("#id_postal_code").val();
    var street_number = $("#id_street_number").val();
    var street = $("#id_street").val();
    var address = street_number+", "+street+", "+postal_code+", "+city+", "+country;

    geocoder.getLatLng( address, function(point) {
        if (point) {
            alert(point);
            $("#id_latitude").val(point.lat())
            $("#id_longitude").val(point.lng())
        } else {
          alert("Geocode was not successful");
        }
    });
    return true;
}

function showResponse() {
    alert('response');
}

HTML

<form id="addresto" action="" method="POST">

<!-- some city, country, street... fields -->

<input type="Submit" id="submit" value="Submit" />
</form>

Answer 1

我相信地理编码器的getLatLng（）是异步调用的。这意味着它不会在继续return true;行之前等待回复。

考虑到这一点，基本上有两种方法：

您可以在触发提交之前调用getLatLng（），例如在地址的onchange事件期间调用并存储提交的值。或者，
您可以添加一个标志，告诉您是否已收到地理编码响应，如果您还没有，则可以在beforeSubmit（）中添加return false;。然后，当您收到回复时，您可以从代码中触发提交。

Answer 2

@Jason的第二个解决方案几乎就在那里。

按时间顺序：

默认情况下，名称为LatLongAvailable的表单输入为
用户输入位置详细信息
jQuery触发getLatLng（），当getLatLng（）返回值时，表单元素LatLongAvailable设置为1
jQuery调用一个函数，开始轮询表单字段LatLongAvailable
如果点击提交，首先检查LatLongAvailable == 1，如果没有，则显示等待标志，继续尝试每隔一秒钟，如果是1，则提交表格

有关使用Javascript轮询的更多信息，请参阅a question I had。

jQuery表单插件的问题

2 个答案: