数组没有与我的其他表单一起发布答案

【问题标题】：array isn't being posted along with the rest of my form数组没有与我的其他表单一起发布
【发布时间】：2014-09-28 13:23:32
【问题描述】：

我正在尝试从谷歌地图 API 发布一个带有额外边界数组的表单，我查看了其他问题，隐藏表单主要与表单提交的挂钩一起使用：

How to add additional fields to form before submit?

Adding POST parameters before submit

所以这就是我一直在尝试做的——尽管我不确定为什么发送的是默认值而不是我设置的那个？

javascript：

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('city'));
var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('destination'));
var directionsService = new google.maps.DirectionsService();
var rboxer = new RouteBoxer();

$("#form").submit(function(e) {
var req = {
    origin: $('#city').val(),
    destination: $('#destination').val(),
    travelMode: google.maps.TravelMode.DRIVING
};
var boundArray = [];
directionsService.route(req, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var path = response.routes[0].overview_path;
        var boxes = rboxer.box(path, 30);
        for (var i = 0; i < boxes.length; i++) {
            boundArray.push(boxes[i].toUrlValue());
        }
        document.getElementById('bounds').setAttribute('value', JSON.stringify(boundArray));
        return true;
    }
});
});

html:

<input id="bounds" type="hidden" name="bounds"/>
<div class="form-group row">
<div class="col-lg-5">
    <button type="submit" value="Submit" id="subBtn" class="btn btn-lg btn-primary sub-btn">Confirm</button>
</div>
</div>

提前致谢，

丹

编辑：我已经更改了我的代码，所以现在我在 POST 请求中得到了一些东西——一个空白数组？

$("#form").submit(function(e) {
var req = {
    origin: $('#city').val(),
    destination: $('#destination').val(),
    travelMode: google.maps.TravelMode.DRIVING
};
var boundArray = [];
directionsService.route(req, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var path = response.routes[0].overview_path;
        var boxes = rboxer.box(path, 30);
        for (var i = 0; i < boxes.length; i++) {
            boundArray.push(boxes[i].toUrlValue());
        }

    }
});
$('#bounds').val(JSON.stringify(boundArray));
return true;
});

【问题讨论】：

设置value属性和设置value属性不一样
我想我已经解决了这个问题，但我仍然不确定为什么我没有得到一个包含某些东西的数组？
服务是异步的，需要在submit之前设置val()并在服务回调中设置

标签： javascript jquery forms post

【解决方案1】：

谢谢，我好像成功了：

function doAsync(callback) {
var req = {
    origin: $('#city').val(),
    destination: $('#destination').val(),
    travelMode: google.maps.TravelMode.DRIVING
};
var boundArray = [];
directionsService.route(req, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var path = response.routes[0].overview_path;
        var boxes = rboxer.box(path, 30);
        for (var i = 0; i < boxes.length; i++) {
            boundArray.push(boxes[i].toUrlValue());
        }
        $("#bounds").val(JSON.stringify(boundArray));
        callback();
    }
});

}

$("#form").submit(function(e) {
doAsync(function () {
    $('#form').submit();
    return true;
});
//return false;
});

【讨论】：

【解决方案2】：

directionsService.route 正在进行异步调用。在实际提交表单之前，需要等待服务调用完成。我修改了一些你的现有代码。希望这对你有用..

var flag = false;

$("#form").submit(function(e) {
    var req = {
        origin: $('#city').val(),
        destination: $('#destination').val(),
        travelMode: google.maps.TravelMode.DRIVING
    };
    if(!flag)
    directionsService.route(req, function (response, status) {
        var boundArray = [];
        if (status == google.maps.DirectionsStatus.OK) {
            var path = response.routes[0].overview_path;
            var boxes = rboxer.box(path, 30);
            for (var i = 0; i < boxes.length; i++) {
                boundArray.push(boxes[i].toUrlValue());
            }
        }

        $('#bounds').val(JSON.stringify(boundArray));
        flag = true;
        $("#form").submit();
    });

    }else{
        flag = false;
        return true;
    }

    return false;
});

【讨论】：