Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi all, I'm wondering if anyone could help me?
I have a form present on every page of a site, which is basically a list consisting of lots of checkboxes. I need any selections a user makes on a page to be forever remembered by every other page, because at the moment, of course, once the user visits another page, the checkboxes all reset.
I know this just requires a simple bit of javascript to create a cookie, but have found absolutely nothing on my travels...I'm looking for something similar to this, but not quite as complicated.
Any help much appreciated, thanks :) -
Using javascript & cookies is a risky solution. If the user has either disabled, you're in trouble. I'd look at some server-side/database option.
-
I agree varland, but in this case, users who who have cookies disabled simply won't have their checkboxes saved when they visit another page. It's not a problem I'll be worried about - the user experience is of course diluted, but the actual functionality isn't and won't stop them from just manually selecting the boxes again - so it's really an accessibilty issue.
I know this sounds like a strange approach, but a database-driven alternative isn't an option at the moment.
Anyone else? -
*** Edited *** Refer below instead.
-
Okay… Ignore the previous post, because it's not quite right. Here's a tested solution. I put the following files in the root of a site to test them, so that's how the file paths are written:
There are five files I used for testing:
/test1.htm
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>JS Cookie Testing (#1)</title>
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/cookies.js" type="text/javascript"></script>
<script src="/javascripts/testing.js" type="text/javascript"></script>
</head>
<body>
<div class="section" id="content">
<input class="rememberMe" id="check2" type="checkbox" />
<input class="rememberMe" id="check3" type="checkbox" />
<input class="rememberMe" id="check4" type="checkbox" />
<input class="rememberMe" id="check5" type="checkbox" />
<input class="rememberMe" id="check6" type="checkbox" />
<input class="rememberMe" id="check7" type="checkbox" />
<input class="rememberMe" id="check8" type="checkbox" />
<input class="rememberMe" id="check9" type="checkbox" />
<input class="rememberMe" id="check10" type="checkbox" />
<br />
<a href="/test2.htm">Test Page #2</a>
</div>
</body>
</html>/test2.htm
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>JS Cookie Testing (#2)</title>
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/cookies.js" type="text/javascript"></script>
<script src="/javascripts/testing.js" type="text/javascript"></script>
</head>
<body>
<div class="section" id="content">
<input class="rememberMe" id="check1" type="checkbox" />
<input class="rememberMe" id="check2" type="checkbox" />
<input class="rememberMe" id="check3" type="checkbox" />
<input class="rememberMe" id="check4" type="checkbox" />
<input class="rememberMe" id="check5" type="checkbox" />
<input class="rememberMe" id="check6" type="checkbox" />
<input class="rememberMe" id="check7" type="checkbox" />
<input class="rememberMe" id="check8" type="checkbox" />
<input class="rememberMe" id="check9" type="checkbox" />
<input class="rememberMe" id="check10" type="checkbox" />
<br />
<a href="/test1.htm">Test Page #1</a>
</div>
</body>
</html>/javascripts/prototype.js
(From http://prototypejs.org/)
This file was not modified after downloading.
/javascripts/cookies.js
(From http://www.quirksmode.org/js/cookies.html)
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=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < 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;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}/javascripts/testing.js
enableCheckBoxHandlers = function() {
$$('input.rememberMe').each(function(element) {
element.observe('click', function(event) {
var value = ($F(element) == 'on' ? true : false);
createCookie(element.id, value);
}.bindAsEventListener(element))
})
}
Event.observe(window, 'load', function() {
$$('input.rememberMe').each(function(element) {
if (readCookie(element.id) == 'true') {
element.checked = "checked";
}
})
enableCheckBoxHandlers();
});
Refer to the prototype documentation for more information. It's excellent.
-
Thank you very much, varland. This is an excellent solution, just what I was looking for. :)
-
if you're using php you could also remember the checkbox values of the checked boxes with session variables. you'd have to have a form submit in the page to get the data to the server side but you could also write some unobtrusve JavaScript that sends it via AJAX. Pretty simple stuff really.
-
PHP session variables will only work until the browser window closes.
You could use PHP to write the cookies and set the state of the checkboxes on load, but then you have to do one of two things:
- Submit the form with javascript when a box is checked (in which case, if javascript is working, why not just let the user's computer handle the processing with the javascript method given above?)
- Use a submit button (which could be a bit tacky)
-
To bump this thread again.. :)
Taking this further, using the example provided above, how would I include a "clear" link (or preferably a button) that erases the cookies set in the session, clearing all the checkboxes on this and subsequent pages?input type="reset" onmouseup="javascript:eraseCookie('rememberMe')"
This is what I tried, but visiting other pages the cookies are not erased. Can anyone spot where I've gone wrong?
It does seem to be mentioned here, but not in enough detail for me to understand.
Thanks all. -
You can use a function to erase all of the cookies, and trigger it off anything (a link, button, etc.):
resetCookies = function() {
$$('input.rememberMe').each(function(element) {
eraseCookie(element.id);
})
}Your problem was that you were trying to erase the cookie by class name, but the cookies were set by ID.
If I were you, I would not include the function call in the XHTML (e.g. on an onmouseup event handler). Instead, I would set up another observer, modifying the window load method given in a previous post:
Event.observe(window, 'load', function() {
$$('input.rememberMe').each(function(element) {
if (readCookie(element.id) == 'true') {
element.checked = "checked";
}
})
enableCheckBoxHandlers();
Event.observe($$('#cookieClearer'), 'click', function() {
resetCookies();
}
});For that to work, simply give you clear link or button an ID of "cookieClearer".
-
Thanks again varland, I'm learning bit by bit here. Unfortunately, I can't seem to get this working.
Adding an ID of "cookieClearer" to my button and also replacing this new window load method directly with the old one - stops the checkboxes remembering their status, and I also get an error message on my Error Console:missing ) after argument list
}); -
eh?
easiest way is to add in input field with type="hidden" -
Tetsuo… I'm not sure what raz!el is talking about, but my code was missing a ")" at the end of the second to last line (the line after "resetCookies();").
-
Right you are - that's fixed the errors, but clicking the clear button and jumping to another page, the cookies are still present, as the checkboxes are still filled out. Just to clarify I have this right, I have "cookie.js", "prototype.js" from Prototype, and my "testing.js" now looks like this:
enableCheckBoxHandlers = function() {
$$('input.rememberMe').each(function(element) {
element.observe('click', function(event) {
var value = ($F(element) == 'on' ? true : false);
createCookie(element.id, value);
}.bindAsEventListener(element))
})
}
resetCookies = function() {
$$('input.rememberMe').each(function(element) {
eraseCookie(element.id);
})
}
Event.observe(window, 'load', function() {
$$('input.rememberMe').each(function(element) {
if (readCookie(element.id) == 'true') {
element.checked = "checked";
}
})
enableCheckBoxHandlers();
Event.observe($$('#cookieClearer'), 'click', function() {
resetCookies();
})
});
...and my HTML contains checkboxes, with a "reset" button at the bottom:
< input type="checkbox" class="rememberMe" id="check5" / >....
...< input type="reset" value="" class="reset" id="cookieClearer" / >
Your help is much appreciated -
Try adding the line "alert('Getting ready to reset all cookies.');" at the top of the resetCookies function and make sure that you see the message. If you see it, then I'm not sure why it wouldn't be erasing all of the cookies.
-
Here's what I ended up with for my testing.js:
enableCheckBoxHandlers = function() {
$$('input.rememberMe').each(function(element) {
element.observe('click', function(event) {
var value = ($F(element) == 'on' ? true : false);
createCookie(element.id, value);
}.bindAsEventListener(element))
})
}
enableResetters = function() {
$$('#resetter').each(function(element) {
element.observe('click', function(event) {
Event.stop(event);
resetCookies();
}.bindAsEventListener(element))
})
}
resetCookies = function() {
$$('input.rememberMe').each(function(element) {
element.checked = false;
eraseCookie(element.id);
})
}
Event.observe(window, 'load', function() {
$$('input.rememberMe').each(function(element) {
if (readCookie(element.id) == 'true') {
element.checked = "checked";
}
})
enableCheckBoxHandlers();
enableResetters();
});I simply added a link with the ID "resetter" to the bottom of my test pages.
-
This works perfectly. Excellent work, sir!
-
Hi,
i have been trying to do this with php, couse i have a similar problem. Can someone point me into a direction on how to do this with php?
Here is my problem:
i have 2 diff pages with diff items on each page. So you can select from this 3 items on each page. Than i have a 3rd page which shows what u have
selected on page 1 and 2 and on 3rd page is also a contact form which than sends the selected items to my email.
I searched all over the forums and i know i have to use sessions ... but i am realy strugling with this one ...
best regards,
heki -
Hi, I tried the script of varland but it didnt work. So I made my site with inly one page(I only need to remember the checkboxes).
and that doesnt work too. This is my site: http://www.pkstat.webs.com/, can anyone just check the sourcecode for faults or errors please.
1 to 19 of 19