배열이 내 양식의 나머지 부분과 함께 게시되지 않습니다.

Question

Google지도 API에서 범위의 추가 배열을 사용하여 양식을 게시하려고합니다. 다른 질문을 살펴본 결과 숨겨진 양식이 주로 사용됩니다. 폼에 후크와 함께 제출

How to add additional fields to form before submit?

Adding POST parameters before submit

그래서 이것이 내가 할 노력했습니다 것입니다 - 나는 확실 해요하지만 기본 값은 오히려 보내지고있는 이유 내가 정하는 것보다?

자바 스크립트 :

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가 비동기 호출을하고있다. 양식이 실제로 제출되기 전에 서비스 호출이 완료되기를 기다리는 것이 필요합니다. 약간의 기존 코드가 수정되었습니다. value 속성 설정

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