表单提交以前的字段值

Question

以下代码应该向Google地图发送地址，获取经纬度的回复，将其存储在表单的相应字段中并提交表单。
实际发生的是警报以正确的顺序出现 - 首先是两个默认值，然后是从谷歌收到的，然后发生两个奇怪的事情：超时没有发生，表单提交默认值而不是默认值来自谷歌。
你能说出原因吗？

$('#simplr-reg').submit(function(event)
{           
    $("input[name=latitude]").val(9999);    // set default values
    $("input[name=longitude]").val(9999);               
    alert($("input[name=latitude]").val());
    alert($("input[name=longitude]").val());

    codeAddress(function(success){}); //callback from googlemaps    

    setTimeout(function(){
        callback(false); //pass false indicating no/invalid response 
        }, 20000);
});

function codeAddress(callback)
{               
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);

            alert($("input[name=latitude]").val());
            alert($("input[name=longitude]").val());            
        }                   
    });         
}  // end of code address

Answer 1

您正在错误地使用回调，导致需要使用setTimeout。此外，$.submit()功能在之前实际提交表单时发生。这可能就是每次输入值重置的原因。

请参阅.submit和.post，并检查哪一个适合您的需要。

或者，您可以选择不提交表格，并达到类似的结果（未经测试）：

有一个按钮，以便您可以触发事件：

<input type="button" name="submitBtn">

当用户点击此按钮时，它将设置输入的值：

$('#submitBtn').click(function () {
   var address = "new york"; // or an input value
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode( { 'address': address}, function(results, status)
   {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);      
        }                   
    });         
});

无需设置超时，因为一旦响应返回，将调用回调函数本身。当然，除非你出于其他目的需要超时 - 例如。 callback(false)正在做其他事情。

免责声明：我不熟悉Geocoder API。

修改

如果您不想编辑HTML，则可以改为引入变量。

var isCallBack = false;

$('#simplr-reg').submit(function(event)
{           
    if (!isCallBack) {
        $("input[name=latitude]").val(9999);    // set default values
        $("input[name=longitude]").val(9999);               
        event.preventDefault();
        codeAddress();
    } else
        isCallBack = false; // may not be required if the page refreshes
});

function codeAddress()
{               
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);

            isCallBack = true;
            $('#simplr-reg').trigger('submit');
        }                   
    });         
}  // end of code address