array isn't being posted along with the rest of my form

Question

I'm trying to post a form with an additional array of bounds from the google maps API, I've looked at other questions and a hidden form is mostly used in conjunction with a hook onto the form submit:

How to add additional fields to form before submit?

Adding POST parameters before submit

So this is what I've been trying to do--although I'm unsure why the default value is getting sent rather than the one I'm setting?

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>

Thanks in advance,

Dan

EDIT: I've changed my code, so that now I get something in the POST request-- a blank array?

$("#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;
});

setting value attribute is not the same as setting the value property — charlietfl, Sep 28 '14 at 13:24
I think I've addressed that, but I'm still not sure why I'm not getting a array with something in it? — dextaa, Sep 28 '14 at 13:48
service is asynchronous, need to set val() before `submit` and set it within the service callback — charlietfl, Sep 28 '14 at 13:52

score 0 · Answer 1 · answered Sep 28 '14 at 14:33

Thanks, I seem to have made it work:

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

Mohd. Shaukat Ali · Answer 2 · 2014-09-28T14:46:06.453

directionsService.route is making asynchronous call. It is needed to wait for the service call to complete before the form actually submitted. I modified a little your exiting code. Hope this work for you..

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

array isn't being posted along with the rest of my form

2 Answers2