Save checkboxes in cookies

@fearb4nathanFeb 22.2009

I am attempting to implement a javascript i found which will save checkboxes on a webpage. Unfortunately whenever i implement it it does not work as in the checkboxes do not save. i am not used to javascript though so i was wondering if anyone could take a look at the codes and help me out? Also i am curious if it doesnt work cause my site is not live?

Here is the site i am getting the code source from ~~[URL=”http://www.assassinscreed-maps.com/AcrePoor.htm”]~~[CLICK HERE][/URL]

My Code is included in brightwood.txt and the part i took from the site (dont worry his source was obviously from another site) is in Sample.txt.

If someone could look at my site (brightwood.txt), the sources site ~~[URL=”http://www.assassinscreed-maps.com/AcrePoor.htm”]~~[CLICK HERE][/URL], and if youd like what i think i need from the source (sample.txt)

to post a comment

JavaScript

10 Comments(s) _↴

@FangFeb 22.2009 — #Your document (Brightwood.txt) does not have a form element.

The ids in the controls are invalid.

The JavaScript is is not linked to the html in anyway and the script contains logic errors which slow the processing.

Validate you document: http://validator.w3.org/

@fearb4nathanauthorFeb 22.2009 — #when you say id do you mean those in my html or the javascript? because i notice that my id have # which is probably what your talking about.

when i tried attaching the java with the html i did put a form on it and it did not work.

i will put the two together with the fixed id in my html if you or anyone else reading could help me if it still does not work.

i attached the new combined html/javascript with fixed id. also when i run the error console in firefox there is a "cookie is null" error and a "syntax error"

also here is my source of the code [HERE]

@fearb4nathanauthorFeb 23.2009 — #Also does anyone know if the cookie wont work if i test it locally on my computer?

@FangFeb 23.2009 — #when i tried attaching the java with the html i did put a form on it and it did not work.[/QUOTE]
It's placement is invalid. [repeat]Validate you document: http://validator.w3.org/[/reteat]

Note: java is not JavaScript!
i attached the new combined html/javascript with fixed id. also when i run the error console in firefox there is a "cookie is null" error and a "syntax error"
[/QUOTE]When you read the cookie, [B]onload[/B], you must check for it's existence first before parsing it.

@fearb4nathanauthorFeb 23.2009 — #ive been googling the errors and hacking away at them. pretty successful so far. THANKS!

but i have had no luck with the whole onload thing can you help me out?

@FangFeb 23.2009 — #Delete this:

 &lt;script language="javascript"&gt;
 CheckCookies();
 &lt;/script&gt;

and add this to your main script:window.onload=CheckCookies;

@fearb4nathanauthorFeb 23.2009 — #wherever i seem to put it it does not seem to get the cookies to save the checkboxes. can you see why it wouldnt be? or where am i supposed to put the onload specifically?

@fearb4nathanauthorFeb 23.2009 — #actually i discovered that there was a part of the checkbox html i was missing to use with the cookies and everything is fixed now.

However when testing it everything works great in firefox but in internet explorer things get messy and the cookies do not save properly. and again trying it after closing dreamweaver they worked fine. what could be going wrong?

@FangFeb 23.2009 — #

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 //This Function Creates your Cookie for you just pass in the Cookie Name, Value, and number of days before you want it to expire.
 function CreateCookie(name,value,days)
 {
 if (days)
 {
 var date = new Date();
 date.setTime(date.getTime()+(days*24*60*60*1000));
 var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name + "=" + value + expires + "; path=/";
 }
 
 //This Function reads the value of a given cookie for you.  Just pass in the cookie name and it will return the value.
 function ReadCookie(name)
 {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i &lt; ca.length;i++) {
 var c = ca[i];
 while (c.charAt(0)==' ') c = c.substring(1,c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
 }
 
 //This Function Erases Cookies.  Just pass in the name of the cookies you want erased.
 function EraseCookie(name)
 {
 CreateCookie(name,"",-1);
 }
 
 //Sets or UnSets Cookies for given checkbox after it's been clicked on/off.
 function ChangeBox(CheckBox)
 {
 if (document.getElementById(CheckBox).checked)
 {
 var CurrentCookie = ReadCookie("fabletwomaps");
 CurrentCookie = CurrentCookie + CheckBox; 
 CreateCookie("fabletwomaps",CurrentCookie,"100");
 }
 else
 {
 var CurrentCookie = ReadCookie("fabletwomaps");
 CurrentCookie = CurrentCookie.replace(CheckBox,""); 
 CreateCookie("fabletwomaps",CurrentCookie,"100");
 }
 }
 
 //Runs on body load to check history of checkboxes on the page.
 function CheckCookies()
 {
 
 <i>	</i>var CurrentCookie = ReadCookie("fabletwomaps");
 
 <i>	</i>for (i=0; i&lt;document.CheckList.elements.length; i++)
 <i>	</i>{
 <i>	</i>	if (document.CheckList.elements[i].type == "checkbox")
 <i>	</i>	{
 <i>	</i>		document.CheckList.elements[i].onclick = function() {ChangeBox(this.id);};
 <i>    </i>        if (CurrentCookie &amp;&amp; CurrentCookie.indexOf(document.CheckList.elements[i].id) &gt; -1)
 <i>	</i>		{
 <i>	</i>			document.CheckList.elements[i].checked = true;
 <i>	</i>		}
 <i>	</i>	}
 <i>	</i>}
 }
 
 //Clears Form
 function ClearBoxes()
 {
 for (i=0; i&lt;document.CheckList.elements.length; i++)
 {
 if (document.CheckList.elements[i].type == "checkbox")
 {
 document.CheckList.elements[i].checked = false;
 ChangeBox(document.CheckList.elements[i].id);
 }
 }
 }
 
 window.onload=CheckCookies;
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 label {display:block; text-align:center;}
 &lt;/style&gt;
 
 &lt;/head&gt;
 
 &lt;body bgcolor="#000000" text="#999999"&gt;
 &lt;p&gt;&amp;nbsp;&lt;/p&gt;
 &lt;table width="451" height="183" border="0" align="center"&gt;
 &lt;tr&gt;
 &lt;td width="445" height="179"&gt;&lt;img src="Images/General&amp;#37;20Header%20v3.jpg" width="576" height="193" /&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;table width="774" border="0" align="center"&gt;
 &lt;tr&gt;
 &lt;td height="106"&gt;&lt;p align="center"&gt;&lt;img src="Images/Home%20Button.jpg" width="107" height="28" /&gt;_____&lt;img src="Images/Maps%20Button.jpg" width="90" height="29" /&gt;_____&lt;img src="Images/Achievements%20Button.jpg" width="268" height="29" /&gt;&lt;/p&gt;
 &lt;p align="center"&gt;&lt;img src="Images/Contact%20Button.jpg" width="171" height="27" /&gt;_____&lt;img src="Images/Links%20Button.jpg" width="99" height="29" /&gt;_____&lt;img src="Images/Donate%20Button.jpg" width="146" height="29" /&gt;&lt;/p&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width="768" height="363"&gt;&lt;center&gt;
 &lt;p&gt;&lt;img src="Images/Page%20Specific%20Names/Bandit%20Coast.jpg" width="424" height="45" /&gt;&lt;/p&gt;
 &lt;table width="200" border="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;div align="center"&gt;Insert Map Here&lt;/div&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;form name="CheckList" action="#"&gt;
 &lt;table width="573" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="231" height="49"&gt;&lt;img src="Images/Gargoyles.jpg" width="231" height="35" /&gt;&lt;/td&gt;
 &lt;td width="97"&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td width="231"&gt;&lt;img src="Images/Silver%20Keys.jpg" width="231" height="35" /&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;label&gt;
 &lt;input type="checkbox" name="BCG01" id="BCG01" /&gt;
 Gargoyle #1
 &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&lt;label&gt;
 &lt;input type="checkbox" name="BCSK01" id="BCSK01" /&gt;
 Silver Key #1
 &lt;/label&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;label&gt;
 &lt;input type="checkbox" name="BCG02" id="BCG02" /&gt;
 Gargoyle #2
 &lt;/label&gt;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/form&gt;
 &lt;p&gt;&amp;nbsp;&lt;/p&gt;
 &lt;/center&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;p&gt;&amp;nbsp;&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@bftrs2Aug 06.2011 — #Hi Fang, thanks for posting this, it's exactly what I'm looking for and way more elegant than I could write.

Also in #JavaScript _↴

java questions .innerHTML in netscape Ok, I have another idea(?)

Success!

Help @fearb4nathan spread the word by sharing this article on Twitter...

Tweet This

Save checkboxes in cookies

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Save checkboxes in cookies

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴