Question

我正在尝试使用javascript

在PHP表单上进行以下操作

强制用户从下拉列表中选择Google地图地址
输入错误，如果他们没有从下拉列表中选择一个值（现有代码用地理坐标填充隐藏字段 - 这就是所需要的）

如果他们只是输入一个地址，并且不从列表中选择它，我需要在屏幕上提醒用户这个事实。

从我在wordpress中使用的插件中，现有代码会自动填充隐藏的输入字段。

使用Javascript：

pp_321_geo_initialize();

                function pp_321_geo_initialize() {

                    var location_field_name = 'field_321';
                    var save_geocode = '1';

                    // if you want to use place names as well as proper addresses, use this instead
                    // pp_321_autocomplete = new google.maps.places.Autocomplete( (document.getElementById(location_field_name)) );

                    pp_321_autocomplete = new google.maps.places.Autocomplete( (document.getElementById(location_field_name)), { types: ['address'] });

                    google.maps.event.addListener(pp_321_autocomplete, 'place_changed', function() {

                        var address = pp_321_autocomplete.getPlace();
                        document.getElementById(location_field_name).value = address.formatted_address;

                        if ( save_geocode == '1' )
                            pp_321_extract_geocode();

                    });

                }

                    function pp_321_extract_geocode() {

                        var place = pp_321_autocomplete.getPlace();
                        console.log( place );
                        var lat = place.geometry.location.lat();
                        var lng = place.geometry.location.lng();
                        var latlng = lat + ',' + lng;
                        document.getElementById('pp_321_geocode').value = latlng;

                    }

表单本身（BuddyPress配置文件编辑页面）具有以下与页面相关的字段：

<input id="field_321" name="field_321" type="text" value="" placeholder="Enter your address" class="form-control valid" autocomplete="off" required="required" aria-required="true" aria-invalid="false">
<input type="hidden" id="pp_321_geocode" name="pp_321_geocode" value="">

我正在考虑将以下内容添加到google.maps.event.addListener函数中：

var has_geocode = document.getElementById(‘pp_<?php bp_the_profile_field_id(); ?>_geocode’).value
if (has_geocode=='') {
return false;
}

我也打开使用该代码添加另一个div以在屏幕上显示错误消息（将div从隐藏更改为显示）

我的Javascript编码仍然不好，我已经四处寻找我认为我需要的东西，但我不一定懂得如何将不同的代码放在一起以获得我想要的东西

Answer 1

HTML：

<input id="field_321" name="field_321" type="text" value="" placeholder="Enter your address" class="form-control valid" autocomplete="off" required="required" aria-required="true" aria-invalid="false">
<input type="text" id="pp_321_geocode" name="pp_321_geocode" value="">
<div id="field_321-error"></div>

CSS：

/* Styles for the address input/field when the value is invalid. */
#field_321.has-error {
  border-color: red;
  color: red;
}

/* Styles for the error message/box for the address input/field. */
#field_321-error {
  display: none;
  color: red;
}

JS :(由http://jsbeautifier.org/美化）

var pp_321_autocomplete;

pp_321_geo_initialize();

function pp_321_geo_initialize() {

  var location_field_name = 'field_321';
  var save_geocode = '1';

  var error_message = 'Please select an address from the list.',
    showError = function() {
      jQuery('#' + location_field_name).addClass('has-error');
      jQuery('#' + location_field_name + '-error').html(error_message).show();

      _has_error = true;
    },
    hideError = function() {
      if (_has_error) {
        jQuery('#' + location_field_name).removeClass('has-error');
        jQuery('#' + location_field_name + '-error').hide().html('');

        _has_error = false;
      }
    },
    _has_error;

  // if you want to use place names as well as proper addresses, use this instead
  // pp_321_autocomplete = new google.maps.places.Autocomplete( (document.getElementById(location_field_name)) );

  pp_321_autocomplete = new google.maps.places.Autocomplete((document.getElementById(location_field_name)), {
    types: ['address']
  });

  google.maps.event.addListener(pp_321_autocomplete, 'place_changed', function() {

    var address = pp_321_autocomplete.getPlace();

    if (undefined !== address.formatted_address) {
      jQuery('#' + location_field_name).val(address.formatted_address);
      hideError();
    } else {
      jQuery('#pp_321_geocode').val('');
      return;
    }

    if (save_geocode == '1')
      pp_321_extract_geocode();

  });

  jQuery('#' + location_field_name).on('change', function() {
    var value = jQuery(this).val(),
      address = pp_321_autocomplete.getPlace();

    if (value && (!address || address.formatted_address !== value)) {
      showError();
      this.focus();
    }

    if (!value) {
      jQuery('#pp_321_geocode').val('');
    }
  });

}

function pp_321_extract_geocode() {

  var place = pp_321_autocomplete.getPlace();
  console.log(place);
  var lat = place.geometry.location.lat();
  var lng = place.geometry.location.lng();
  var latlng = lat + ',' + lng;
  document.getElementById('pp_321_geocode').value = latlng;

}

检查输入值 - Google地图自动填充

1 个答案: