CODEWITHSUNDEEP
javascript
curious1
curious1

Reputation: 14727

Go back to the actual previous page regardless of a form post error

I have a page with a form. On this page there is also "go back to previous page" link, which uses the following JavaScript:

window.history.go(-1)

When the form is posted and there is a validation error, the website returns the user to the same form page. However, clicking on this link in case of a form validation error gets the user to the form page before its submission, not the actual, different previous page.

How can I get the user back to the actual previous page by ONLY using JavaScript? Please note that there could be multiple times of form submission with errors.

Upvotes: 0

Views: 1877

Answers (2)

myfunkyside
myfunkyside

Reputation: 3950

You could probably use location.replace() in your redirect after validation error.

This will erase the current page location from the history and replace it with the new one, so it has no effect on page history.

Another option is to use sessionStorage to check if the URL has actually changed after going back one page in the history.

window.onload = function() {
  document.getElementById("back").onclick = function() {
    sessionStorage.setItem("href",location.href); //store current page into sessionStorage
    history.go(-1); //go back one page
  };
  if (location.href == sessionStorage.getItem("href")) {document.getElementById("back").click();} //if current page is the same as last one, go back one page
  else {sessionStorage.removeItem("href");} //clear sessionStorage
};

In the demos below (SO doesn't allow sessionStorage) I had to simulate both "going through the history", and "page load for every history item", so the code looks a little different, using an array and other vars and functions, but the principle should be the same:

codepen: https://codepen.io/anon/pen/OgBgGg?editors=1011
jsfiddle: https://jsfiddle.net/j0ddnboq/2/

Upvotes: 1

pixelearth
pixelearth

Reputation: 14630

You could store the "actual" previous page in a hidden form field on initial load and send this along with the form, then in your "go back to previous page" link js you could access that data.

Upvotes: 0

Related Questions