表单提交失败之前的 jQuery 字段更新 - javascript 变量范围答案

【问题标题】：jQuery field update before form submit fails - javascript variable scope表单提交失败之前的 jQuery 字段更新 - javascript 变量范围
【发布时间】：2014-01-24 19:25:20
【问题描述】：

我需要在提交之前更新一个（隐藏的）表单域。
我尝试了所有可能的实现，但更改的值根本没有提交 -> 而是提交了旧值
我要更新的字段是“XXX_place”
我将它设置为 '' 首先删除旧值：

$('#XXX_place').val('');

此代码检查是否已更新：

if ($('#XXX_place').val() == '') {
        event.preventDefault();
}

没有提交表单，因为条件为真，但字段已更新并具有正确的值 -> 这非常令人困惑

我最近的猜测是它是可变作用域——里面做了什么

函数（结果，状态）{

未设置全局，虽然我的字段已更新，但未提交结果。我应该改变什么？

这里是完整的代码：

    var geocoder;
var placeData;
geocoder = new google.maps.Geocoder();

var input = document.getElementById('XXX_address'),
        options = {
            types: ['geocode'],
            language: ['de'],
            componentRestrictions: {country: 'de'}
        },
        autocomplete = new google.maps.places.Autocomplete(input, options);

$('#searchform').submit(function(event) {
    codeAddress();
    if ($('#XXX_place').val() == '') {
        event.preventDefault();
    }
});


function codeAddress() {
    $('#XXX_place').val('');
    placeData = '';
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.257141, 11.335030),
        new google.maps.LatLng(48.014731, 11.828041));
    geocoder.geocode( { 'componentRestrictions':{'locality': 'Munich'},
        'bounds': bounds, 'address': $('#XXX_address').val()}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            placeData = stringifyPlace(results[0].formatted_address, results[0].geometry.location);
            $('#XXX_place').val(placeData);
            }
     });

      alert(placeData);
}

function stringifyPlace(address, location) {

    return JSON.stringify({"formatted_address": address,
                                    "latitude": location.d,
                                    "longitude": location.e
                                    });
}

【问题讨论】：

异步请求被视为同步的情况。
这是什么意思？我的想法有可能实现还是我需要改变一切？
这意味着$('#XXX_place').val(placeData); 在if ($('#XXX_place').val() == '') 之后运行。所以是的，你需要改变你做事的方式。

标签： javascript jquery forms callback scope

【解决方案1】：

JavaScript 不像您可能知道的大多数脚本语言那样工作。它在很大程度上依赖于回调函数（处理程序）来避免像这样的运行问题。

在提交时，您正在调用 codeAdress()，在其中调用 geocode 方法。该方法似乎使用了ajax调用。 JavaScript 不关心调用是否完成，它只是继续提交。

您可以通过将单击事件处理程序绑定到提交按钮来解决此问题，而不是监听提交。您必须防止默认并在地理编码器回调函数中触发提交，如下所示：

$('#id_of_submit_button').click(function(e){
 e.preventDefault();
 codeAdress();

 return false;
});

和

geocoder.geocode( { 'componentRestrictions':{'locality': 'Munich'},
                    'bounds': bounds, 'address': $('#XXX_address').val()}, 
                    function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                        placeData = stringifyPlace(results[0].formatted_address,
                        results[0].geometry.location);
                        $('#XXX_place').val(placeData);
                        $('#searchform').submit();
                      }
                     });

另一种可能性是使用布尔变量处理您的提交。

var val_unchanged = false;

// some code

$('#searchform').submit(function(e){
  if val_unchanged{
    e.preventDefault
    codeAdress();
    return false;
  }else{
    return true;
  }
});

// add at the end of geocode callback
val_unchanged = false;
$('#searchform').submit();

您最好不要依赖表单并手动提交数据。

【讨论】：