数组未与表单的其余部分一起发布

Question

我正在尝试发布带有Google Maps API附加边界数组的表单，我看过其他问题，并且隐藏表单通常与挂钩表单提交一起使用：

提交前如何在表格中添加其他字段？

提交前添加POST参数

因此，这就是我一直在尝试的方法-尽管我不确定为什么要发送默认值而不是我设置的默认值？

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;
});

Answer 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;
});

Answer 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;
});