WebDeveloper.com - Click Checkbox saves "checked" status and changes text color

WebDeveloper.com (http://www.webdeveloper.com/forum/index.php)

- JavaScript (http://www.webdeveloper.com/forum/forumdisplay.php?f=3)

- - Click Checkbox saves "checked" status and changes text color (http://www.webdeveloper.com/forum/showthread.php?t=69628)

Click Checkbox saves "checked" status and changes text color

I have a simple checkbox task list. I want to be able to click the checkbox and have the page update the status of that item as checked, change the font color, and save the page as simply as possible.

Any help is much appreciated. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Task List and Information</title>
<style type="text/css" media="all">@import "TaskList.css";</style>
</head>

<body>

<div id="Header" class="title">Task List and Information</div>

<div id="Content2">
<h2>Tasks</h2>
<p><input type="checkbox">Task 1</p>
<p><input type="checkbox">Task 2</p>
<p><input type="checkbox">Task 3</p>
<p><input type="checkbox">Task 4</p>
</div>

<div id="Content2">
<h2>Information</h2>
<p><li class="text">Info 1</li></p>
<p><li class="text">Info 2</li></p>
</div>

<div id="Menu">
<a href="link 1.htm">Link 1</a><br />
<a href="link 2.htm">Link 2</a><br />
</div>



</body>
</html>

Saving of the page will require server-side code.

even with a onClick="document.execCommand('SaveAs');" or something along those lines? I don't mind resaving the doc because it's not updated that often...

Thanks.

If you mean to say that you will only be using this for your own use and only as a local document on your own harddrive then, yes, you could do that. Another idea, though, is to save the checked selections in a cookie and just restore these settings from the cookie each time you return to the page. Ya think? ;)

That is exactly the case. It is on my local harddrive and only for my use. How would I go about doing either option? I tried the SaveAs, but that didn't save the status of the checkbox as checked. I like the cookie idea though.

Thanks.

So would I then use an onClick=setCookie(this.name, this.value) ? Where would I use the other functions. My apologies for my lack of understanding. I see how the functions work, just not sure where to place them...

Thanks.

You would also want an expiration date when setting the cookie -- but, otherwise, you've got the general idea. The getCookie function would be used when returning to your page in order to set the form values back to the saved status. This would be done in a page onload function.

Cool, thanks for the help.

Ok, more questions. I created a .js (Tasks) that looks like this:

var expDate = new Date(); // starting with today
var oneDay = 1000 * 60 * 60 * 24; // calculate the time in one day
var oneYear = oneDay * 365; // and then the time in one year
expDate.setTime(expDate.getTime() + oneYear); // add to date object
setCookie("test", "date", expDate, "/"); // create cookie

function getCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function setCookie(name, value) {
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

Then I modified my TaskList.html to look like this:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Task List and Information</title>
<style type="text/css" media="all">@import "TaskList.css";</style>
</head>
<script language="javascript" src="Tasks.js"></script>
<body onload=getCookie("test")>

<div id="Header" class="title">Task List and Information</div>

<div id="Content2">
<h2>Tasks</h2>
<p><input type="checkbox" name="cb1" value="cb1" onclick=setCookie("test","cb1")>Task 1</p>

This isn't working for me, so I KNOW I did something wrong. Any quick fixes?

Thanks

I recommend you try something more like this:

HTML Code:

<input type="checkbox" name="cb1" value="cb1" onclick="

 setCookie(this.name, this.checked);

 return true;">

so that you can do something more like this:

HTML Code:

<body onload="

 var cVal = getCookie('cb1');

 if (cVal==null) cVal = false;

 document.forms[0].elements['cb1'].checked = cVal;

 retun true;">

But, like I said... You're going to need an expiration date when setting the cookie in order to keep the cookie past the current browser session.

can you put setCookie(this.name, this.checked, expDate)? If not, where would I make use of the expDate var that was created in the declarations?

Thanks again!

Yes, you can create a global variable called expDate and reference it as you have shown it.

one more thing, when I run what you've written above, I get an error that says:

document.forms.0.elements is null or not an object...

I'm assuming I need to put these in an array since I have multiple checkbox items for the task list...otherwise, I would have to create a separate cookie for each checkbox item and get the cookies during the onload... correct?

Thanks!