javascript - How to Maintain User Input When window.history.back() is Invoked? - Stack Overflow

admin管理员组

文章数量:1244222

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 Autoplete 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 Autoplete, it is still maintained in that spot. I'm presuming that the issue lies within the Google Autoplete itself, but how do I fix this?

Here is the Javascript for Google Autoplete:

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

var placeSearch, autoCompleteOrigin, autoCompleteDest;
var ponentForm = {
  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 autoplete object, restricting the search
  // to geographical location types.
  autoCompleteOrigin = new google.maps.places.Autoplete(
      /** @type {HTMLInputElement} */(document.getElementById('start')),
        { types: ['geocode'] });
  autoCompleteDest = new google.maps.places.Autoplete(
      /** @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 autoplete object.
  var place = autoplete.getPlace();

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

  // Get each ponent of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_ponents.length; i++) {
    var addressType = place.address_ponents[i].types[0];
    if (ponentForm[addressType]) {
      var val = place.address_ponents[i][ponentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autoplete 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
      });
      autoplete.setBounds(circle.getBounds());
    });
  }
}

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 Autoplete 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 Autoplete, it is still maintained in that spot. I'm presuming that the issue lies within the Google Autoplete itself, but how do I fix this?

Here is the Javascript for Google Autoplete:

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

var placeSearch, autoCompleteOrigin, autoCompleteDest;
var ponentForm = {
  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 autoplete object, restricting the search
  // to geographical location types.
  autoCompleteOrigin = new google.maps.places.Autoplete(
      /** @type {HTMLInputElement} */(document.getElementById('start')),
        { types: ['geocode'] });
  autoCompleteDest = new google.maps.places.Autoplete(
      /** @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 autoplete object.
  var place = autoplete.getPlace();

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

  // Get each ponent of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_ponents.length; i++) {
    var addressType = place.address_ponents[i].types[0];
    if (ponentForm[addressType]) {
      var val = place.address_ponents[i][ponentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autoplete 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
      });
      autoplete.setBounds(circle.getBounds());
    });
  }
}

• javascript
• html
• google-maps-api-3
• autoplete

Share Improve this question Follow asked May 26, 2015 at 1:09 freddiev4freddiev4 2,62122 gold badges2828 silver badges4646 bronze badges 5

• This is probably because google autoplete api uses autoplete="off" attributes in their input tags. Try to add this to your own inputs in ponentForm to check if they are stopped working also – Ersin Basaran Commented May 26, 2015 at 1:20
• @ErsinBasaran Could you elaborate further? – freddiev4 Commented May 26, 2015 at 16:10
• Try window.history.back(0) – Dimple Commented Jun 4, 2015 at 12:06
• @Dimple tried it, input still bees blank – freddiev4 Commented Jun 5, 2015 at 12:42
• use local storage, or pass the variable to global – syarul Commented Sep 22, 2015 at 20:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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/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

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

jQuery solution:

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

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

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

document.getElementById(ponent).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.

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 pletely.

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.

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.

本文标签： javascriptHow to Maintain User Input When windowhistoryback() is InvokedStack Overflow