Автозаполнение Google Maps Places неправильно заполняется при использовании кнопки «Назад»

У меня есть простая адресная форма для адреса. Когда я перехожу на следующую страницу и затем нажимаю кнопку «Назад», данные адреса искажаются. Адрес отсутствует, в поле address2 указан город, в поле city указан почтовый индекс, а почтовый индекс отсутствует...

Автозаполнение Google Maps Places неправильно заполняется при использовании кнопки «Назад»Автозаполнение Google Maps Places неправильно заполняется при использовании кнопки «Назад»

Если я уберу скрипт google maps внизу, все работает нормально, но включив его, я получаю ошибочное поведение. Я максимально упростил автозаполнение и даже удалил часть fillInAddress() для автозаполнения. Не знаю, куда идти отсюда. Любая помощь приветствуется.

[![<script src = "../assets/jquery-2.1.4.min.js"></script>
{% block content %}
    <div class = "customer js-cart-form-step js-form-wrap col-xs-12 col-sm-6 col-sm-pull-6">
        <h5>Customer Information</h5>
        <div class = "email row">
            <div class = "col-xs-12">
                <div class = "moving-input input-required input-email">
                    <input class = "stripspaces" type = "text" id = "shipping_email" autocapitalize = "off" value = "{{ lead.email }}" autocomplete = "on">
                    <label>Email</label>    
                </div>                              
            </div>
        </div>
        <h5>Shipping Address</h5>
        <div class = "row">
            <div class = "col-xs-12 col-md-6">
                <div class = "moving-input input-required input-firstname">
                    <input type = "text" id = "shipping_first_name" value = "{{ lead.firstname }}"  autocomplete = "on">
                    <label>First Name</label>
                </div>
            </div>
            <div class = "col-xs-12 col-md-6">
                <div class = "moving-input input-required input-lastname">
                    <input type = "text" id = "shipping_last_name" autocomplete = "on">
                    <label>Last Name</label>    
                </div>                                  
            </div>
        </div>
        <div class = "row">
            <div class = "col-xs-12 col-md-6">
                <div class = "moving-input input-required input-address">
                    <input type = "text" id = "shipping_address" class = "route street_number" placeholder = "" autocomplete = "on" >
                    <label>Address</label>
                </div>
            </div>
            <div class = "col-xs-12 col-md-6">
                <div class = "moving-input">                          
                    <input type = "text" id = "shipping_address2" autocomplete = "on">
                    <label>Apartment/Suite #</label>        
                </div>                              
            </div>
        </div>
        <div class = "row">
            <div class = "col-xs-12 col-md-6">
                <div class = "moving-input  input-required input-city">
                    <input type = "text" id = "shipping_city" class = "locality" autocomplete = "on">
                    <label>City</label> 
                </div>
            </div>
            <div id = "shipping_state_input" class = "col-xs-12 col-md-6">
                <div class = "moving-input js-location-picker input-required">
                    <select id = "shipping_state">
                        <option></option>
                        <option value = "Alabama">Alabama</option>
                        <option value = "Alaska">Alaska</option>
                        <option value = "Arizona">Arizona</option>
                        <option value = "Arkansas">Arkansas</option>
                        <option value = "California">California</option>
                        <option value = "Colorado">Colorado</option>
                        <option value = "Connecticut">Connecticut</option>
                        <option value = "Delaware">Delaware</option>
                        <option value = "District of Columbia">District of Columbia</option>
                        <option value = "Florida">Florida</option>
                        <option value = "Georgia">Georgia</option>
                        <option value = "Hawaii">Hawaii</option>
                        <option value = "Idaho">Idaho</option>
                        <option value = "Illinois">Illinois</option>
                        <option value = "Indiana">Indiana</option>
                        <option value = "Iowa">Iowa</option>
                        <option value = "Kansas">Kansas</option>
                        <option value = "Kentucky">Kentucky</option>
                        <option value = "Louisiana">Louisiana</option>
                        <option value = "Maine">Maine</option>
                        <option value = "Maryland">Maryland</option>
                        <option value = "Massachusetts">Massachusetts</option>
                        <option value = "Michigan">Michigan</option>
                        <option value = "Minnesota">Minnesota</option>
                        <option value = "Mississippi">Mississippi</option>
                        <option value = "Missouri">Missouri</option>
                        <option value = "Montana">Montana</option>
                        <option value = "Nebraska">Nebraska</option>
                        <option value = "Nevada">Nevada</option>
                        <option value = "New Hampshire">New Hampshire</option>
                        <option value = "New Jersey">New Jersey</option>
                        <option value = "New Mexico">New Mexico</option>
                        <option value = "New York">New York</option>
                        <option value = "North Carolina">North Carolina</option>
                        <option value = "North Dakota">North Dakota</option>
                        <option value = "Ohio">Ohio</option>
                        <option value = "Oklahoma">Oklahoma</option>
                        <option value = "Oregon">Oregon</option>
                        <option value = "Pennsylvania">Pennsylvania</option>
                        <option value = "Rhode Island">Rhode Island</option>
                        <option value = "South Carolina">South Carolina</option>
                        <option value = "South Dakota">South Dakota</option>
                        <option value = "Tennessee">Tennessee</option>
                        <option value = "Texas">Texas</option>
                        <option value = "Utah">Utah</option>
                        <option value = "Vermont">Vermont</option>
                        <option value = "Virginia">Virginia</option>
                        <option value = "Washington">Washington</option>
                        <option value = "West Virginia">West Virginia</option>
                        <option value = "Wisconsin">Wisconsin</option>
                        <option value = "Wyoming">Wyoming</option>
                    </select>
                    <label>State</label>        
                </div>                              
            </div>
        </div>
        <div class = "row">
            <div class = "col-xs-12 col-md-6">    
                <div class = "moving-input input-required input-zip-code">    
                    <label>Zip</label>
                    <input type = "text" id = "shipping_zip" class = "postal_code" maxlength = "5"  autocomplete = "on" class = "prep">
                </div>
            </div>
            <div class = "col-xs-12 col-md-6">    
                <div class = "moving-input input-required input-phone">                               
                    <input id = "shipping_phone" value = "{{ lead.phone }}"  maxlength = "10" autocomplete = "on"  type = "tel" pattern = "\[0-9\]*" inputmode = "numeric">
                    <label>Phone</label>
                </div>                                  
            </div>
        </div>
        <div class = "row">
            <div class = "form-message-error js-form-message-error col-xs-12">
                <p></p>
            </div>
        </div>
        <div class = "row">
            <div class = "col-xs-12">
                <button class = "btn btn-dark js-button-customer" tabindex = "12">continue</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>

    function saveCustomerInfo(dto) {
        $.ajax("/api/saveCustomerInfo", {
            contentType: "application/x-www-form-urlencoded",
            data: { lead: dto },
            type: "POST",
            success: function(result, status, xhr) {
                if (result.ok !== true) {
                    console.info("FAIL saveCustomerInfo: " + result.debug);
                    Rollbar.error("API call to saveCustomerIfo failed",{debug: result.debug});
                } else {
                    window.location.href = "/checkout/shipping";
                }
            },
            error: function(xhr, status, error) {
                displayGenericError();
            }
        });
    };

    function saveLead(email) {
        var dto = {
            email: email
        };
        if (navigator.sendBeacon) {
            navigator.sendBeacon("/api/saveLead",JSON.stringify(dto));
        } else {
            $.post("/api/saveLead", dto);
        }
    };

    $(document).ready(function() {


        $('.js-button-customer').click(function(event) {

            var state_val = $('#shipping_state option:selected').text();

            $('.form-message-error p').text('');

            //var form_valid = validate_form($(this).closest('.js-form-wrap'));
            if (true) {
                var dto = {
                    firstname: $('#shipping_first_name').val().trim(),
                    lastname: $('#shipping_last_name').val().trim(),
                    email: $('#shipping_email').val().trim().toLowerCase(),
                    phone: $('#shipping_phone').val(),
                    address1: $('#shipping_address').val(),
                    address2: $('#shipping_address2').val(),
                    city: $('#shipping_city').val(),
                    state: state_val,
                    postalCode: $('#shipping_zip').val()            
                };
                saveCustomerInfo(dto);
            } else {

                $('.form-message-error').slideDown(400);
                $('.input-required input, textarea').focus(function() {
                    $('.form-message-error').slideUp(400);
                    $('.form-message-error p').text('');
                });
                var e = form_valid.errormsgs;
                var em = e.join('<br/>');
                $('.form-message-error p').append(em);

                event.preventDefault(); // stop if invalid
            };
        });
    });

    $('.summary-footer-desktop').hide();
    </script>

    <script>

    function initAutocomplete() {
      // Create the autocomplete object, restricting the search to geographical
      // location types.
       autocomplete = new google.maps.places.Autocomplete(
           /** @type {!HTMLInputElement} */(document.getElementById('shipping_address')),
           {});

      // When the user selects an address from the dropdown, populate the address
      // fields in the form.
      //autocomplete.addListener('place_changed', fillInAddress);
    }
  </script>


    <script src = "https://maps.googleapis.com/maps/api/js?key = {{config.GoogleAPIKey}}&libraries=places&callback=initAutocomplete" async defer></script>
{% endblock %}][1]][1]

Это в браузере Хром?

geocodezip 28.03.2019 20:32

Да, похоже, это только в хроме. Я только что попробовал в Firefox и Edge, и, похоже, он работает правильно.

shobeurself 28.03.2019 21:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
177
0

Другие вопросы по теме