Creating Cookies and Altering CSS with Javascript

**dog** · 12-01-2006, 07:00 PM

I'm brand new to cookies and not all that accustomed to writing my own javascript

But i have a dream!

In this dream there is a page with a form. The form is inside a div and the CSS relating to the div states: display:none.

There will be javascript on this page. The javascript will look for a cookie. If it can't find the cookie the CSS relating to the div will be changed from 'none' to 'block' and the form will be displayed.

When the form is sent a cookie will be created and the next time the page is browsed the form will no longer be displayed.

The backend of the form will involve PHP but that's another dream.

Can anyone help guide me realise this javascript dream?

.dog.

**coothead** · 12-02-2006, 01:53 PM

Hi there dog,

does this help...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hide {
    display:none;
 }
</style>

<script type="text/javascript">
 var state;
function setCookie() {
  exp=new Date();
  plusMonth=exp.getTime()+(31*24*60*60*1000);
  exp.setTime(plusMonth);
  document.cookie='Display='+state+';expires='+exp.toGMTString();
 }

function readCookie() {
if(document.cookie) {
   state=document.cookie.split('Display=')[1]
   document.getElementById('theForm').className=state;
}
else { 
   state='hide';
   setCookie();
  }
 }
window.onload=function() {
   readCookie();
 }
</script>

</head>
<body>

<form id="theForm" action="#">
<div>
<input type="text" value="basic form"/>
</div>
</form>

</body>
</html>

coothead

**dog** · 12-02-2006, 05:01 PM

Hey coothead,

I'll give it a try and let you know. Thanks a lot.

dog

**dog** · 12-02-2006, 05:12 PM

Ok! I've tried it out and the form shows up. Which is good because I've never filled it out before.

Now I'm hoping to put in a submit button that triggers a bit of javascript that writes the cookie.

**dog** · 12-02-2006, 05:33 PM

....but I don't know how to do that. Can you help?

**coothead** · 12-02-2006, 06:59 PM

Hi there dog,

try it like this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hide {
    display:none;
 }
</style>

<script type="text/javascript">

 var obj;
 var state;

window.onload=function() {
   obj=document.getElementById('theForm');
   obj.onsubmit=function() {
   return setCookie();
  }
   readCookie();
 }

function setCookie() {
  exp=new Date();
  plusMonth=exp.getTime()+(31*24*60*60*1000);
  exp.setTime(plusMonth);
  document.cookie='Display=hide;expires='+exp.toGMTString();
  obj.className='hide';
 }

function readCookie() {
if(document.cookie) {
   state=document.cookie.split('Display=')[1]
   obj.className=state;
  }
 }

</script>

</head>
<body>

<form id="theForm" action="#">
<div>
<input type="text" value="basic form" name="foo"/>
<input type="submit" value="submit"/>
</div>
</form>

</body>
</html>

coothead

**dog** · 12-02-2006, 08:16 PM

I've tested the script and what happpens is the form disappears when it is submitted but when I return to the page the form appears again, this isn't what I'm looking for.

I'm trying to learn javascript. Ideally I'd like to know how to write the following three functions:

Create a cookie - just so it can be checked for later.
Check for a cookie - and If the cookie is found nothing happens. Else another function is run.
Change some CSS - display:none to display:block.

Any help learning how to do this would be really appricated.

**coothead** · 12-02-2006, 08:37 PM

Hi there dog,

I tested the code in these browsers...

Firefox 1.5.0.8
IE 6.02
Opera 9.1

...and the form disappeared onsubmit and did not return.

Perhaps you would care to post your code that is not working for you.

coothead

**dog** · 12-02-2006, 08:53 PM

Hi Coothead,

Perhaps you would care to post your code that is not working for you.

It's the exact same script as you posted above.

I've just tested in in IE 6.02 and it is working perfectly there.

In Firefox 2.0 it's not working. After two submissions the form disappears but it returns again on refreshing or revisiting the page.

I'd like for someone to explain the javascript I need to use piece by piece (or direct me to a suitable tutorial). I'm just starting out in Javascript and it's hard to understand a complete set of functions mixed in together without any explaination.

The script you've written differs from what I was envisioning because the form does not start of as hidden. Your javascript adds a class to the form that makes it hidden yet this way, if the javascript doesn't work it stays visible.

**dog** · 12-02-2006, 08:57 PM

Coothead,

Could you explain to me how to write a function that checks to see if there is a certain cookie if it is found nothing happens and if not the display of a div is changed from none to block?

I don't really understand cookies. How are they identified, given names, etc?

Thread: Creating Cookies and Altering CSS with Javascript

Thread Tools

Search Thread

Creating Cookies and Altering CSS with Javascript

Bookmarks

Bookmarks

Posting Permissions