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

Answer 3

Can you modify the given Google Autocomplete JS? or is that restricted, vendor code?

If so, I'd be eager to try removing this line:

document.getElementById(component).value = '';

I don't think this has anything to do with your use of History. You can confirm that by checking whether the behavior of your edit button is different from the browser Back button.

Answer 4

To maintain the values in the edittext field when the page reloads, you need to make use of the various local storage mechanism that are supported by the browsers. Some of them are as follows:

• File API
• IndexedDB
• Web Storage
• Cookies

For this particular scenarios I would make use of the Web Storage where you would have a persistent session based storage. The data in the edittext field will persist till the user close the browser completely.

Here is a code sample implementation:

window.onbeforeunload = function() {
    localStorage.setItem(addresss1, $('#addresss1').val());
    localStorage.setItem(addresss2, $('#addresss2').val());

}

This is a syncronous call, so whenever the user switch back to this page you can check to see if the data is still there. Follow this code sample.

window.onload = function() {

    var name = localStorage.getItem(address1);
    if (name !== null) $('#address1').val(address1);

    // ...
}

getItem returns null if the data does not exist.

Answer 5

instead of window.history.back() you could also pass parameters from webpage 2 to webpage 1 (and vice-versa) by parameters in the url.

here you can see how to pass parameters with javascrip: How to get the value from the GET parameters?

So on your second webpage replace the

window.history.back()

to

window.location=http://mywebpage1.bla?param1=something&param2=something

In your first page in the onload of the page you can check to see if there are parameters present and set the values of the input fields

grtz,S.