Add to browser history without page reload

Question

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> 

Answer 1

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

Relevant link to the docs.

Answer 2

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");