2014-09-28 38 views
0

我試圖發佈一個窗體與谷歌地圖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; 
}); 
+0

設定值屬性是不一樣的設定值屬性 – charlietfl 2014-09-28 13:24:39

+0

我想我已經解決這一點,但我仍然不知道爲什麼我沒有得到一個數組東西在裏面? – dextaa 2014-09-28 13:48:22

+0

服務是異步的,需要在'submit'之前設置val()並將其設置在服務回調中 – charlietfl 2014-09-28 13:52:52

回答

0

謝謝,我似乎已經取得了它的工作:

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

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; 
}); 
相關問題