1

So, I want to change the display style of one of my divs, here's the code in my javascript:

document.getElementById("header1").style.display='none';

Now the problem... header1 is a div id on a different page, but I want to affect that from selecting an option on the current page. How do I go about doing that so that the header1 will be hidden when I go onto the next page?

Thank you in advance!

Creights
  • 907
  • 1
  • 12
  • 25
  • Using cookies or a QueryString would be the easiest two methods to get data from one page to another. Cookies will only work if on the same domain while QueryString will always work, just fyi. – TheZ Jul 11 '12 at 15:54
  • You can't, at least not directly. You have to pass a parameter (or a cookie value, or *something*) via the HTTP request that leads to the other page, and then have code on the server or in that other page do the work in response. – Pointy Jul 11 '12 at 15:55

3 Answers3

2

You cannot change the properties of an element that has not been loaded into the browser yet. You would have to use a cookie or the querystring to tell you to hide the element when the page is loaded.

Edit

You can redirect to a new page using the following javascript. Note: everything following the ? is part of the querystring.

// Redirect without querystring
window.location = "http://www.mySite.com/default.html"

// Redirect with querystring
window.location = "http://www.mySite.com/default.html?hide=true"

// Redirect with multiple values in querystring
window.location = "http://www.mySite.com/default.html?hide=true&test=1"

Check out get-query-string-values-in-javascript to see how to retrieve querystring values through javascript.

Community
  • 1
  • 1
Josh Mein
  • 28,107
  • 15
  • 76
  • 87
  • I want to avoid using cookies, how do you use a query string? Is that by appending to the URL of the next page? – Creights Jul 11 '12 at 17:03
  • @Creights I have updated my answer to provide more information. – Josh Mein Jul 11 '12 at 17:22
  • Thanks Josh, that's really helpful. Is it right that I use that without physically re-directing to the page and the update will show when I do go to it? And to be clear - hide=true is for the element test=1? I'm not familiar with that notation. – Creights Jul 12 '12 at 08:35
  • `window.location` will redirect the browser to the new page for you. The `test=1` was just another made up querystring value that I just made up to show you how to handle multiple values. – Josh Mein Jul 12 '12 at 11:57
0

You could pass the value to the next page in a hidden form field or possibly via the url then when that page loads use that value to set the desired value on the page.

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
0

how about carrying the value/selection to the other page using local/session storage, or even indexDB, if you have a lot of information to carry or you are carrying across multiple pages. saves having unneeded POSTS and removes the need for any server side code

atmd
  • 7,430
  • 2
  • 33
  • 64
  • Could you give an example of using local storage? I have tried this but I hit errors, and as I'm not too familiar with this type of storage, your help would be welcomed! – Creights Jul 11 '12 at 17:05