Problem while reloading a page using JavaScript

I have 2 divs, containing three di开发者_StackOverflowfferent textboxes.

By default on page load I have enabled div1.

If I click button2 it will enable the 2nd div and disable div1.

Now I refresh the page. By default it will show the div as visible like page load.

Is there any way to show div2 and its textbox as visible using a script?

If I understand you correctly, you want to be able to remember states.

There are several options which one can use to achieve desired effect.

1. Cookies

On page load you can check whether a cookie has been set. If not, you will show div1 by default. If a cookie has been set, you will hide all divs except for the one that is specified by the cookie.

In order to help yourself and save some time, you can try to find some functions for manipulating cookies with Javascript online, like this ones.

1. Sessions

This approach is more or less the same as with cookies, the only difference is that instead of checking whether cookies have been set, you make AJAX call for PHP script which will check whether session has been set and send a corresponding response to the Javascript using whatever format you like (ie. JSON).

1. Local storage

Difference between this option and the previous two is that local storage is not supported by all browsers, so you will have to check for browser support first. If user's browser does not support local storage, you will have to use either option 1 or option 2, unless you find some more solutions to you problem.

To check for local storage support, you can use following code:

return ('localstorage' in window) && window['localstorage'] !== null

In order to get yourself familiarized with localstorage, you can watch this short video on net.tutsplus.

Please refer to the following thread to learn more how toggle element’s visibility via the javascript:

Toggle Visibility - Show/Hide Anything

See Also:

.toggle() - jQuery API