If you want to do all this on the client side, you certainly can. Keep in mind that this will be easy to do, so you will never want to implement actual security in javascript on the client, but for something stupid that watchdog groups are from the back, this will work.
I assume that you have the html file you pasted above, saved as checkAge.html. Add the following to the <form> tag:
<form action="index.html" name="age_form" method="get" id="age_form" onSubmit="checkAge()">
When the form is submitted will be executed checkAge . If a person says that they are 18 years old, the function returns true, and the form is submitted and index.html loaded. If they say they are not 18, the function returns false, a warning popup is displayed, and the form is not submitted.
And change your checkAge function checkAge that the last part looks like this:
var ret; if ( (today.getTime() - theirDate.getTime()) < 0) { alert("You are too young to enter this site!"); ret = false; } else { ret = true; } setCookie('ageCheck', ret, 1);
This adds the code to set the cookie, and then returns true or false.
In addition, you will need to add this feature to simplify the setting of cookies:
function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); }
This is just a helper function that makes cookie settings easy.
Then on your content pages you can do something like this:
<html> <head> <title>My age-restricted content</title> <script> window.onload = function () { var ageCheck = getCookie('ageCheck'); if ('true' == ageCheck) { document.getElementById('content').style.display = ''; } else { window.location = '/checkAge.html'; } } function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } </script> </head> <body> <div id="content" style="display: none;"> You can't see this unless you are old enough </div> </body> </html>
This makes the page content invisible by default. When the page loads, the javascript code checks to see if there is a cookie indicating that the person is 18. If there is, then the contents of the page are displayed. If there is no cookie, there is a cookie which says that the person is under 18 years old, then they are redirected to the age verification page.