jQuery表单插件的问题

Question

我正在使用 jQuery 表单插件在提交表单之前调用一个函数。 该函数调用 google geocoder 服务，查找地址的坐标，并在表单中设置隐藏坐标字段的值。 似乎在 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

@Jason 的第二个解决方案几乎可以实现。

按时间顺序：

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

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

Answer 2

我相信地理编码器的 getLatLng() 是异步调用的。这意味着它无需等待响应即可继续使用 return true; 行。

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

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