Question

当用户输入地址时，它应该获取地址并将其内容放在隐藏的输入字段中。 javascript不会触发并写入隐藏的输入字段的值。

我相信可能是javascript / jquery没有以正确的顺序执行，或者我有版本冲突问题？

我已自动完成Google地址

var placeSearch, autocomplete;
 // Need to add Lat / Long to populate field.
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name',

};

function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {
    types: ['geocode']
  });
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    document.getElementById(component).value = "";
    document.getElementById(component).disabled = true;
  }
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
  document.getElementById("Latitude").value = place.geometry.location.lat();
  document.getElementById("Longitude").value = place.geometry.location.lng();
}
google.maps.event.addDomListener(window, "load", initAutocomplete);

我的输入字段为

                <input type="hidden" value="" class="form-control" id="street_number" name="pnumb">
                <input type="hidden" value="" class="form-control" id="route" name="paddy">
                <input type="hidden" value="" class="form-control" id="locality" name="pcity">
                <input type="hidden" value="" class="form-control" id="administrative_area_level_1" name="pstat">
                <input type="hidden" value="" class="form-control" id="postal_code" name="pzip">
                <input type="hidden" value="" class="form-control" id="Latitude" name="plat">
                <input type="hidden" value="" class="form-control" id="Longitude" name="plong">

这是我在页面顶部的javascript jquery。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

这就是页面底部的内容。

<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="../../plugins/fastclick/fastclick.js"></script>
<script src="../../dist/js/app.min.js"></script>
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>

我从控制台获取以下错误代码

1.) ReferenceError: google is not defined[Learn More]
2.) TypeError: document.getElementById(...) is null[Learn More]

我在尝试使用datepicker时遇到了问题。

我相信我的javascript / jquery执行不正确？

任何想法;我对Javascript / Jquery很糟糕

Answer 1

好的，所以有两个不同的错误可能需要两个不同的分析：

1。）ReferenceError：谷歌未定义[了解更多]

第一个javascript代码是否会成功运行脚本标记？如果在声明之前尝试使用某些东西，则会出现参考错误。

更明确地说，您的代码必须按此顺序排列：

<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
...
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>

<script>
    var placeSearch, autocomplete;
    // Need to add Lat / Long to populate field.
    ...

    google.maps.event.addDomListener(window, "load", initAutocomplete);
</script>

2.。）TypeError：document.getElementById（...）为null [了解详情]

在我们告诉您解决方案是什么之前我们需要知道它发生了什么，您正在多次调用document.getElementById您的浏览器是否显示触发错误的行？

编辑：我发现你没有列出自动完成控件的输入，它是否出现在代码的其他地方？

你应该看到一个带有id =＆＃34; autocomplete＆＃34;的输入，如下所示：

<input type="hidden" value="" class="form-control" id="autocomplete" name="pautocomplete">

Answer 2

可能的解决方案如下：

＃Step-1：删除第二个jQuery版本加载：

....
<!--<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>-->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
....

＃Step-2：我在您的代码中看不到Google MAP's Place Autocomplete Javascript API;包括它：

<!-- with a callback function 'initMap' -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

＃Step-3：完成JS代码的最后一行，如下所示：

function initMap(){
    google.maps.event.addDomListener(window, "load", initAutocomplete);
}

Answer 3

我必须从componentFrom变量中删除country: 'long_name',。我没有为它定义输入字段，这导致它打破了js。

Javascript没有为getElementByID启动

3 个答案: