У меня есть простая адресная форма для адреса. Когда я перехожу на следующую страницу и затем нажимаю кнопку «Назад», данные адреса искажаются. Адрес отсутствует, в поле address2 указан город, в поле city указан почтовый индекс, а почтовый индекс отсутствует...
Если я уберу скрипт 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]
Да, похоже, это только в хроме. Я только что попробовал в Firefox и Edge, и, похоже, он работает правильно.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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