Adding URLs to one page web application

Question

Suppose I have a "one page" web application. The "main page" (index.html) contains a few web forms, but only one form is displayed at any time. When the application is loaded only form A is displayed in the page. The page contains also a button, which hides form A and displays form B.

Now I would like to add a new URL, which displays form B (but not form A).
What is the right way to do it ?

Answer 1

1. Make it work as a multiple page application (use a regular link to go to the other form, etc)
2. Add the JavaScript (to both pages) so that the page changes between states instead of performing the default action of the link
3. Use pushState and friends to change the URL to that of the second page

Answer 2

I agree with Quentin, I believe you should have multiple pages. But for your current needs you can do the following:

1. You give an id for all of your forms. For instance, if you have form A, form B and form C, you can give them the id of "A", "B" and "C".

2. In the URL you can define a GET parameter called formid, like: http://www.yourpage.something?formid="B"

3. All the forms should have a class, let's call that foo which is defined as:

   foo { display: none; }

4. When the document has loaded, with Javascript read the value of the formid GET parameter , let's suppose you have that in a variable called myformid. Then:

   $("#" + myformid).removeClass("foo");