表单提交时包含先前的字段值

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