25

Basically, I have a page that contains a form. When a user submits that form, a Javscript function is called and the user is dynamically presented with a new form.

At this point, what I would like is for the user to be able to click the browser's back button and be taken back to the first form. Is this possible?

Thanks for the quick responses, but I am having trouble getting pushState to work. The HTML still displays "second form" after I click the back button.

Here is the code I used to test it:

<script>
function newPage(){
    history.pushState({state:1}, "State 1", "?state=1");
    document.getElementById('formBox').innerHTML="second form";
}
</script>


<input type="button" onclick="newPage();" value="forward" />
<div id='formBox'>first form</div>
pnuts
  • 58,317
  • 11
  • 87
  • 139
twiz
  • 9,041
  • 8
  • 52
  • 84

2 Answers2

31
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Relevant link to the docs.

Elliot Bonneville
  • 51,872
  • 23
  • 96
  • 123
  • This is fine if you don't mind it breaking in older browsers. – Michael Robinson May 10 '12 at 20:17
  • 6
    @MichaelRobinson (but mostly for future developers who find this answer) such functionality Should be treated at present as a nice addition to make a better user experience. The inconvenience of not having the back option doesn't break the site and fallbacks can be implement such as the `beforeunload` event. As browsers move forward this should be the correct answer because it is native javascript. – Joseph Marikle Mar 18 '13 at 17:32
  • 2
    I know it came from the docs the same way you've written it, but do you know what effect the stateObj has? What is the purpose of foo: and "bar"? – Luke Feb 05 '15 at 03:17
  • 2
    @Luke the `stateObj` can contain whatever you want it to. When you use `history.back()`, `history.forward()`, or `history.go(target)` (where `target` is either an integer or a full/partial url), or if the user uses the browser's back button, then you can access that `stateObj`. E.g. `window.onpopstate = function(event) { alert(JSON.stringify(event.state));` https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate – Buttle Butkus Oct 04 '15 at 07:14
  • 1
    Elliot, I think you also need to add @Buttle's comment to your answer. Both of them together helped me out. – Bhargav Rao Oct 23 '15 at 12:30
15

I've accomplished similar behaviour with the HTML5 History/State APIs, using History.js, described thus:

Provide a cross-compatible experience for all HTML5 Browsers (they all implement the HTML5 History API a little bit differently causing different behaviours and sometimes bugs - History.js fixes this ensuring the experience is as expected / the same / great throughout the HTML5 browsers)

Example:

History.pushState({state:1}, "State 1", "?state=1");
Michael Robinson
  • 29,278
  • 12
  • 104
  • 130
  • 3
    This is native JS functionality, no need for a library. – Elliot Bonneville May 10 '12 at 20:15
  • Agree, but historyjs is pretty handy – MilkyWayJoe May 10 '12 at 20:16
  • This seems like the correct answer, but I am bit confused about how exactly to restore the original form after the back button is clicked. When I hit "back" it stays on the page, but the second form still remains. – twiz May 12 '12 at 04:22
  • 1
    You store whatever data you like in the first argument, an `object` to the `History.pushState` function. In your code that handles state changes, you need to use this information to restore the page to its previous state manually. – Michael Robinson May 14 '12 at 10:46