我使用Google Places API在用戶搜索後自動將位置/目標填充到表單中。我有表單自動填充正確,但是當我將表單提交到我的數據庫時,對象每次都是未定義的。我在自動填充發生後嘗試提交表單時發生了我的問題。JS/Angular/Places API - document.getElementById(key).value與表單輸入相關的問題
奇怪的是,如果手動複製並粘貼自動填充到同一文本字段中的相同信息,表單將被提交併且數據將被輸入到我的數據庫中,而不會造成任何問題。
爲什麼會發生這種情況的任何想法?如果我自動將正確的值填充到表單中,那麼當我訪問控制器時,是否應該將這些值綁定到我的ng模型中?
HTML ========================
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h3>Markers</h3>
<form ng-submit="addMarker(newMarker)">
<div class="form-group">
<p>Add a new marker: </p>
<div class="form-group">
<input type="text" class="form-control" id="title" placeholder="Title" ng-model="newMarker.title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Address" ng-model="newMarker.address">
</div>
<div class="form-group">
<input type="text" class="form-control" id="category" placeholder="Category" ng-model="newMarker.category">
</div>
<div class="form-group">
<input type="text" class="form-control" id="url" placeholder="URL (optional)" ng-model="newMarker.url">
</div>
<div class="form-group">
<textarea type="textarea" class="form-control" id="description" placeholder="Message (optional)" ng-model="newMarker.description"></textarea>
</div>
<div class="form-group">
<input type="text" class="form-control" id="list" placeholder="Add to a list (optional)" ng-model="newMarker.list">
</div>
<div class="form-group">
<input type="text" class="form-control" id="latitude" placeholder="Latitude" disabled="true" ng-model="newMarker.latitude">
</div>
<div class="form-group">
<input type="text" class="form-control" id="longitude" placeholder="Longitude" disabled="true" ng-model="newMarker.longitude">
</div>
<input type="submit" class="btn btn-primary">
</div>
</form>
</div>
<div class="col-md-10">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
</div>
</div>
</div>
JS ============= =============
// Get the HTML input element for search for the autocomplete search box
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Create the autocomplete object.
var autocomplete = new google.maps.places.Autocomplete(input);
// Event Listener for a Places API search
google.maps.event.addListener(autocomplete, 'place_changed', function(){
var infoWindow = new google.maps.InfoWindow({map: map});
var place = autocomplete.getPlace();
var contentString = '<p><b>'+place.name+'</b></p>'+
'<p>'+place.formatted_address+'</p>';
var pos = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
fillInForm(place);
map.setCenter(pos);
infoWindow.setPosition(pos);
infoWindow.setContent(contentString);
});
});
// Auto fill the form from the Places API search
var fillInForm = function(place) {
// Get the place details from the autocomplete object.
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var markerForm = {
title: place.name,
address: place.formatted_address,
coordinates: ""+lat+", "+lng+""
};
for (var key in markerForm) {
document.getElementById(key).value = '';
document.getElementById(key).disabled = false;
var val = markerForm[key];
document.getElementById(key).value = val;
}
$scope.markerForm = markerForm;
}
// CREATE NEW MARKER ===============================
$scope.addMarker = function() {
markersFactory.addMarker($scope.newMarker, function(returnDataFromFactory){
if(returnDataFromFactory.hasOwnProperty('errors')){
$scope.newMarkerErrors = returnDataFromFactory.errors;
} else {
// console.log(returnDataFromFactory.data);
$scope.newMarker = {};
}
})
}
編輯:添加了容器的其餘部分。以前只提供表格div。添加了pac-input和map div。
你在哪裏發佈了你的pac-input字段?如果不在那裏,你可以發佈相同的代碼嗎? – GraveyardQueen
@GraveyardQueen沒有問題!我之前省略了,只是提供了表格。我已將pac-input字段添加到我原來的帖子中。 – justinchanman