jQuery添加的post变量不发送到服务器答案

【问题标题】：jQuery added post variables are not sent to the serverjQuery添加的post变量不发送到服务器
【发布时间】：2013-10-09 19:28:03
【问题描述】：

我使用了一个 before submit 钩子以便在提交之前运行一些 javascript。因此我使用以下代码：

jQuery(function() {
    jQuery('#setup-form').submit(function(e) {
        codeAddress();
        return true;
    });
});

函数codeAddress() 用数据填充两个隐藏的输入字段。数据实际上已填充（填充到 value 属性中）。但是在服务器端没有数据到达。这里有什么问题？

仅供参考：

function codeAddress() {
    var address = document.getElementById('address').value;
    if(address){
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var location2 = '' + location;
                location2 = location2.slice(1, location2.length - 1).split(', ');
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);

                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
}

【问题讨论】：

geocoder.geocode 是异步的。您必须延迟提交表单，直到获得结果（或将提交处理程序传递给 codeAddress，这将在收到结果时触发表单提交）

标签： jquery forms input submit hidden-field

【解决方案1】：

我认为问题是在隐藏字段中设置值之前提交表单。您可以做的是将您的功能代码放在提交块中，并在设置隐藏字段后返回 true，以便在提交之前设置您的隐藏字段。

试试这个

jQuery(function() {
jQuery('#setup-form').submit(function(e) {
    var address = document.getElementById('address').value;
    var isHiddenFieldSet=0;//0 indicates hidden field value is not set
    if(address){
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var location2 = '' + location;
                location2 = location2.slice(1, location2.length - 1).split(', ');
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);

                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });
                isHiddenFieldSet=1;//Set value to 1 to indicate hidden field value is set
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
    if(isHiddenFieldSet){//Submit the form only if hidden field value is set
          return true;
    } else {
         return false;
    }
    });
 });

【讨论】：

似乎return true 为geocoder.geocode 返回了true，但之后又遇到了'return false'...

【解决方案2】：

首先调用您的 codeAddress 函数，然后在您设置值后从该函数内部调用您的提交。像这样

function codeAddress() {
    var address = document.getElementById('address').value;
    if(address){
                .
                .
                .
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);
                jQuery('#setup-form').submit();
             ...
}

【讨论】：

jQuery('#setup-form').submit(); 是否会因为触发jQuery('#setup-form').submit(function(e) {...} 而启动无限循环？

【解决方案3】：

由于 Ravi Thakkar 和 mry 的答案不起作用（我评论了原因），我建议我自己的解决方案，但它是基于您的想法：

function codeAddress(submit) {
    var address = document.getElementById('address').value;
    if(address){
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var location2 = '' + location;
                location2 = location2.slice(1, location2.length - 1).split(', ');
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);

                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });

                if(submit) jQuery('#setup-form').submit();
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    } else {
        if(submit) jQuery('#setup-form').submit();
    }
}

因此需要将html中的提交按钮改成这样：

<button type="button" class="btn btn-success btn-lg" onclick="codeAddress(true)">Submit</button>

【讨论】：