PDA

View Full Version : 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 :o

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...

<!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...

<!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.:o

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.

:rolleyes:

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

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?

dog
12-06-2006, 08:19 PM
Coothead wrote:
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.


Then i wrote:
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've just came back to this project and the same file is not working in Firefox too. :confused:

Sorry for the mix up. I don't know how to explain it not working the other day because I'm using the exact same version. Strange!

Just wanted to make note of that and offer my thanks again to Coothead. :o

Cheers

dog

dog
12-07-2006, 04:51 AM
Below is the code I'm using on the page at the moment.

I'd like to make some changes but I wanted to check that they won't cause any problems.


<!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>

<div id="thePage">
Page Content Here.
</div>
</body>
</html>

I'd like to change

obj.className='hide'; to
obj.style.display='none';
I've tried this out and it doesn't seem to cause any problems.

Where I'm stuck is with adding an extra object, thePage, to the variables and changing that to display=block at the same time as the form is hidden.

Ultimately, what I want to do is, before all the javascript have the form hidden and the page shown. Then, using the javascript, hide the page and show the form until it has been filled out. At this point the cookie gets written the form gets hidden and the page displayed.

There may be other ways of doing this but I think it's a good idea because if the user doesn't have javascript enabled the form will remain hidden and the page will be accessible.

I'm open to any other ideas anyone may have.

Please help if you can?

Thanks,

dog :cool: