How to Maintain User Input When window.history.back() is Invoked?

Question

I have two HTML pages on a site I'm working on. The first page takes in user input (a start and end location) and then passes the info into the Google Maps Javascript API in order to determine the distance between two locations.

The second page displays this information for the user.

However, I also have a button called Edit which invokes onclick="window.history.back()".

The problem I'm having is that the two sections for user input also use the Google Autocomplete for addresses, and so when I go to the next page and click the Edit button, the user input is removed from the input box, whereas without Google Autocomplete, it is still maintained in that spot. I'm presuming that the issue lies within the Google Autocomplete itself, but how do I fix this?

Here is the Javascript for Google Autocomplete:

google.maps.event.addDomListener(window, 'load', initialize);
// ==========================================================================================================
// ==========================================================================================================
// ==========================================================================================================
// USES THE GOOGLE PLACES LIBRARY
// ==============================
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autoCompleteOrigin, autoCompleteDest;
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 initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autoCompleteOrigin = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('start')),
        { types: ['geocode'] });
  autoCompleteDest = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('destination')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autoCompleteOrigin, 'place_changed', function() {
    fillInAddress();
  });
  google.maps.event.addListener(autoCompleteDest, 'place_changed', function() {
    fillInAddress();
  });
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

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

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  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;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Answer 1

you would have to have a system to store/update/restore form data. one way of doing this is to have generic change and input handlers that save the state into localStorage, and then restore it back on page load (or any other handler you may have)

Here is a fiddle showing a simple way of doing this: http://jsfiddle.net/wnbcsrsL/

You would need to do some namespacing based on the page you're on to avoid name collision (and you also need to make sure that every input has a name) but other than that it's straightforward

Answer 2

I solved this by removing the autocomplete="off" attribute before submit. If you already remove it after the initialization, the built-in autocomplete from the browser (tested on Chrome) overwrites the google places autocomplete list. This preserves the intended behaviour from Google and also the input values on browser navigation.

jQuery solution:

$('input[type="submit"]').click(function () {   
    $('input[autocomplete="off"]').removeAttr('autocomplete');
}