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