2

when I'm using more than one input in the form, autocomplete doesn't work but if its one input then it will work fine. I'm using this form to get address using google api and the problem every time when want to add new address i see the previous input

enter image description here

<form autocomplete="off" id="form_address" >
    <input type="text" id="postal_code" onFocus="geolocate()">
    <input type="text" id="city">
    <textarea placeholder="Delivery Instructions"></textarea>
</form>  


<script>
    var placeSearch, postal_code;
    var componentForm = {
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
    };

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

    function fillInAddress() {
        var place = postal_code.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

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

    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
            });
            postal_code.setBounds(circle.getBounds());
            });
        }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDSzHOBeXL_Goaj4tecH3l0YTJ7anf2rc&libraries=places&callback=initAutocomplete" async defer></script>

1 Answers1

0

You should put autocomplete off on form and on input element also

<form autocomplete="off" id="form_address"> <input type="text" autocomplete="off" id="postal_code" onFocus="geolocate()"> <input type="text" id="city"> <textarea placeholder="Delivery Instructions"></textarea> </form>

Pikeo
  • 22
  • 5