asked on

Age verification (Over 18 only)

Below is my current webpage, I want to add a function that checks the user is over 18 before posting the data to coke.php

I have managed to get a javascript function to check if the terms and conditions box is ticked but can't get the age verification right :-(

I'm sure this will take you guys a min or two to work out haha!

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Ben" content="Ben.com" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
 
<script type="text/javascript" language="JavaScript">
 
function checkscript() {
 
		var boxesTicked = ""
 
	for (i = document.getElementsByName('tc').length - 1; i >= 0; i--) {
 
		if (document.getElementsByName('tc')[i].checked) {
 
		boxesTicked = boxesTicked + document.getElementsByName('tc')[i].value + "\n"
	
		}
 
	}
 
 
		if (boxesTicked == "") {
 
		alert ("You must accept the terms and conditions to continue.")
 
			return false
		}
 
		else {
 
			return true;
		}
 
}
 
 
</script>
 
 
<body>
 
<div id="container">
 
	<div id="header">
		<p>
			<img src="header.jpg">
		</p>
	</div>
 
 
	<div id="menu">
			<img src="banner.jpg">
			<a href="index.html">Home</a>
	</div>
 
 
	<div id="sidebar">
	</div>
 
 
	<div id="main">
		<p>
 
			<img src="coke2.jpg">
 
			<form name="input" action="coke.php" method="post" onsubmit="return checkscript()">
 
			<table border="0">
				<tr>
					<td>First Name:</td>
					<td><input type="text" name="firstname"></td>
				</tr>
				<tr>
					<td>Last Name:</td>
					<td><input type="text" name="lastname"></td>
				</tr>
				<tr>
					<td>Gender:</td>
					<td><select name="gender">
						<option value="Male">Male</option>
						<option value="Female">Female</option>
					</select>
					</td>
				</tr>
				<tr>
					<td>Address Line 1:</td>
					<td><input type="text" name="address1"></td>
				</tr>
				<tr>
					<td>Address Line 2:</td>
					<td><input type="text" name="address2"></td>
				</tr>
				<tr>
					<td>Town:</td>
					<td><input type="text" name="town"></td>
				</tr>
				<tr>
					<td>Postcode:</td>
					<td><input type="text" name="post"></td>
				</tr>
				<tr>
					<td>DOB:</td>
					<td><select name="day">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="28">28</option>
						<option value="29">29</option>
						<option value="30">30</option>
						<option value="31">31</option>
					</select>
 
					<select name="month">
						<option value="1">Jan</option>
						<option value="2">Feb</option>
						<option value="3">Mar</option>
						<option value="4">Apr</option>
						<option value="5">May</option>
						<option value="6">Jun</option>
						<option value="7">Jul</option>
						<option value="8">Aug</option>
						<option value="9">Sep</option>
						<option value="10">Oct</option>
						<option value="11">Nov</option>
						<option value="12">Dec</option>
					</select>
					<select name="year">
						<option value="2007">2007</option>
						<option value="2006">2006</option>
						<option value="2005">2005</option>
						<option value="2004">2004</option>
						<option value="2003">2003</option>
						<option value="2002">2002</option>
						<option value="2001">2001</option>
						<option value="2000">2000</option>
						<option value="1999">1999</option>
						<option value="1998">1998</option>
						<option value="1997">1997</option>
						<option value="1996">1996</option>
						<option value="1995">1995</option>
						<option value="1994">1994</option>
						<option value="1993">1993</option>
						<option value="1992">1992</option>
						<option value="1991">1991</option>
						<option value="1990">1990</option>
						<option value="1989">1989</option>
						<option value="1988">1988</option>
						<option value="1987">1987</option>
						<option value="1986">1986</option>
						<option value="1985">1985</option>
						<option value="1984">1984</option>
						<option value="1983">1983</option>
						<option value="1982">1982</option>
						<option value="1981">1981</option>
						<option value="1980">1980</option>
						<option value="1979">1979</option>
						<option value="1978">1978</option>
						<option value="1977">1977</option>
						<option value="1976">1976</option>
						<option value="1975">1975</option>
						<option value="1974">1974</option>
						<option value="1973">1973</option>
						<option value="1972">1972</option>
						<option value="1971">1971</option>
						<option value="1970">1970</option>
						<option value="1969">1969</option>
						<option value="1968">1968</option>
						<option value="1967">1967</option>
						<option value="1966">1966</option>
						<option value="1965">1965</option>
						<option value="1964">1964</option>
						<option value="1963">1963</option>
						<option value="1962">1962</option>
						<option value="1961">1961</option>
						<option value="1960">1960</option>
						<option value="1959">1959</option>
						<option value="1958">1958</option>
						<option value="1957">1957</option>
						<option value="1956">1956</option>
						<option value="1955">1955</option>
						<option value="1954">1954</option>
						<option value="1953">1953</option>
						<option value="1952">1952</option>
						<option value="1951">1951</option>
						<option value="1950">1950</option>
						<option value="1949">1949</option>
						<option value="1948">1948</option>
						<option value="1947">1947</option>
						<option value="1946">1946</option>
						<option value="1945">1945</option>
						<option value="1944">1944</option>
						<option value="1943">1943</option>
						<option value="1942">1942</option>
						<option value="1941">1941</option>
						<option value="1940">1940</option>
						<option value="1939">1939</option>
						<option value="1938">1938</option>
						<option value="1937">1937</option>
						<option value="1936">1936</option>
						<option value="1935">1935</option>
						<option value="1934">1934</option>
						<option value="1933">1933</option>
						<option value="1932">1932</option>
						<option value="1931">1931</option>
						<option value="1930">1930</option>
						<option value="1929">1929</option>
						<option value="1928">1928</option>
						<option value="1927">1927</option>
						<option value="1926">1926</option>
						<option value="1925">1925</option>
						<option value="1924">1924</option>
						<option value="1923">1923</option>
						<option value="1922">1922</option>
						<option value="1921">1921</option>
						<option value="1920">1920</option>
						<option value="1919">1919</option>
						<option value="1918">1918</option>
						<option value="1917">1917</option>
						<option value="1916">1916</option>
						<option value="1915">1915</option>
						<option value="1914">1914</option>
						<option value="1913">1913</option>
						<option value="1912">1912</option>
						<option value="1911">1911</option>
						<option value="1910">1910</option>
						<option value="1909">1909</option>
						<option value="1908">1908</option>
						<option value="1907">1907</option>
						<option value="1906">1906</option>
						<option value="1905">1905</option>
						<option value="1904">1904</option>
						<option value="1903">1903</option>
						<option value="1902">1902</option>
						<option value="1901">1901</option>
						<option value="1900">1900</option>
					</select>
					</td>
 
					<td></td>
				</tr>
 
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email"></td>
				</tr>
				<tr>
					<td>Mobile Number:</td>
					<td><input type="text" name="mobile"></td>
				</tr>
 
			</table>
 
 
			<table border="0">
				<tr>
					<td><b>I would also like Coca Cola Enteprises to send me intresting news/offers by:</b></td>
				</tr>
 
			</table>
 
 
			<table border="0">
				<tr>
					<td>Post:</td>
					<td><input type="checkbox" name="cmail" value="cmail"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="checkbox" name="cemail" value="cemail"></td>
				</tr>
				<tr>
					<td>SMS/Text:</td>
					<td><input type="checkbox" name="csms" value="csms"></td>
				</tr>
				<tr>
 
			</table>
 
 
			<table border="0">
				<td></td>
				</tr>
			</table>
 
 
			<table border="0">
				<tr>
				<td>I have read the <a href="tandc.html"><b>Terms & Conditions</b></a>:</td>
				<td><input type="checkbox" name="tc" value="tc"></td>
				</tr>
 
			</table>
 
 
<br>
<br>
 
			<p align="right"><input type="submit" value="Submit">
 
			</form>
 
		</p>
 
	</div>
 
	<div id="footer">
 
		&copy; Ben 2008 
 
	</div>
 
</body>
 
</html>

Open in new window

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

souldigital

ASKER

I want the day, month and year to be selected from dropdown boxes (looks a bit better in my opinion).

It would probably be easier for the user to enter 22/06/1987 but I would like it to be dropdowns.

:-s

Ben

HonorGod

ok, something like this perhaps?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Age Check</title>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id )
    if ( !ele ) {
      alert( 'Specified field not found.  id="' + id + '"' )
    }
    return ele
  }
  function ageCheck( mId, dId, yId ) {
    function d2( val ) {
      return ( val < 10 ) ? '0' + val : val
    }
    mObj = field( mId )
    dObj = field( dId )
    yObj = field( yId )
 
    if ( mObj && dObj && yObj ) {
      if ( mObj.selectedIndex && dObj.selectedIndex && yObj.selectedIndex ) {
        var mon = mObj.options[ mObj.selectedIndex ].value
        var day = dObj.options[ dObj.selectedIndex ].value
        var yr  = yObj.options[ yObj.selectedIndex ].value
        var picked = d2( mon ) + '/' + d2( day ) + '/' + yr
        var then   = new Date( yr, mon - 1, day )
        var actual = d2( then.getMonth() + 1 ) + '/' + d2( then.getDate() ) + '/' + then.getFullYear()
        if ( picked != actual ) {
          alert( 'Invalid date selected: ' + what )
        } else {
          var now  = new Date()
          var then = new Date( yr, mon - 1, day )
          var age  = now.getTime() - then.getTime()
          var mYear = 1000 * 60 * 60 * 24 * 365.25 // Milliseconds in a year
          alert( ( age / mYear ).toFixed( 2 ) + ' years old' )
        }
      }
    }
  }
  function init( mId, dId, yId ) {
    mObj = field( mId )
    if ( mObj && mObj.nodeName == 'SELECT' ) {
      months = 'Month,Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split( ',' )
      for ( var m = 0; m < months.length; m++ ) {
        mObj.options[ m ] = new Option( months[ m ], m )
      }
    }
    dObj = field( dId )
    if ( dObj && dObj.nodeName == 'SELECT' ) {
      dObj.options[ 0 ] = new Option( 'Day' )
      for ( var d = 1; d < 32; d++ ) {
        dObj.options[ d ] = new Option( d, d )
      }
    }
    yObj = field( yId )
    if ( yObj && yObj.nodeName == 'SELECT' ) {
      yObj.options[ 0 ] = new Option( 'Year' )
      for ( var i = 1, y = 2008; y > 1900; i++, y-- ) {
        yObj.options[ i ] = new Option( y, y )
      }
    }
  }
</script>
</head>
<body onload='init("mon","day","year")'>
  <div id="main">
    <table border="0">
      <tr>
        <td colspan='3'>Date of Birth</td>
      </tr>
      <tr>
        <td><select id='mon'  onChange='ageCheck("mon","day","year")'></select></td>
        <td><select id='day'  onChange='ageCheck("mon","day","year")'></select></td>
        <td><select id='year' onChange='ageCheck("mon","day","year")'></select></td>
      </tr>
    </table>
  </div>
</body>
</html>

Open in new window

souldigital

ASKER

Still a little technical for me :-(

I was thinking something more like this (Don't know how to add it in :-s)

		function checkAge()
		{
			/* the minumum age you want to allow in */
			var min_age = 18;
 
			/* change "age_form" to whatever your form has for a name="..." */
			var year = parseInt(document.forms["age_form"]["year"].value);
			var month = parseInt(document.forms["age_form"]["month"].value) - 1;
			var day = parseInt(document.forms["age_form"]["day"].value);
 
			var theirDate = new Date((year + min_age), month, day);
			var today = new Date;
 
			if ( (today.getTime() - theirDate.getTime()) < 0) {
				alert("You are too young to enter this site!");
				return false;
			}
			else {
				return true;
			}
		}

Open in new window

HonorGod

Well, there are problems with the minimal approach you present.

- An invalid date could be specified, and this code doesn't care

For example: Select 2/31/1990

One way to get around this is to use the JavaScript Date() object
constructor to "create" a date object using the specified values.
This is done in the code supplied above. Specifically in the line:

var then = new Date( yr, mon - 1, day )

Then, this value is "converted into a string" using a specific format
i.e., mm/dd/yyyy, and this date (then) is compared against the one
created using the select values (picked).

If the 2 date strings don't match, then they selected an invalid
date. Note that by doing it this way, we let the JavaScript Date
object code deal with leap years, and number of days in a specific
month...

- Another problem is that you are only comparing the years to find
their age. Doing this, means that the code only recognizes valid
ages when the difference between the year values is > 18. So,
if I was born 18 years ago today, the test would fail, saying that
I was only 17...

There are different ways to do this, but the one shown above
uses the fact that the getTime() method for a Date object returns
the number of milliseconds from a specific reference time. Yes, I
know that the reference date is 1/1/1970, and dates before this
will return negative times. But that doesn't matter, since the
difference between "now" and "then" will still compute accurately.

- to use the above code, you could easily replace this statement:

alert( ( age / mYear ).toFixed( 2 ) + ' years old' )

with something like:

return ( age / mYear > 18.0 )

Which will return "true" if the "age" (i.e., difference) is greater than 18 (years)

HonorGod

I guess that you really don't want ageCheck() to "return" true or false...
because it is invoked when the user changes one of the "date" selection
values. They may not have filled in the rest of your form...

souldigital

ASKER

The drop down values are listed as 1,2,3,4 even though they appear as jan feb mar etc so the user can not input an invalid date. They will see it as 10 Jun 1965, the realistic view will be 10 6 1965

It does not have to be overly complicated as it is a demo page for a college project I am working on.

Is there any way of using the above basic javascript to do what I want?

Ben

souldigital

ASKER

What do you think?

HonorGod

hm. Oversight on my part. Sorry, one moment please.

HonorGod

> The drop down values are listed as 1,2,3,4 even though they appear as jan feb mar etc
> so the user can not input an invalid date.

Huh? I'm sorry, I don't understand...

How is this a "valid date"?
Feb31.jpeg

souldigital

ASKER

The day is fine 1-31

Month looks like this -

                               <select name="month">
                                    <option value="1">Jan</option>
                                    <option value="2">Feb</option>
                                    <option value="3">Mar</option>
                                    <option value="4">Apr</option>
                                    <option value="5">May</option>

So the user sees the month (Jan, Feb etc), but the backend sees a numeric value.

So there is no way of getting the day/month/year muddled up.

Ben

HonorGod

So is there a problem?

souldigital

ASKER

I am confused :-(

The javascript should just see

day - 1-31
month- 1-12
year - 1900-2008

I think I am missing your point. Can I not use that basic script in my current code?

Ben

HonorGod

I guess we are both a little confused.

For example, if I add:

alert( 'Selected values:\n mon = ' + mon + '\n day = ' + day + '\n year= ' + yr )

Just after:

var mon = mObj.options[ mObj.selectedIndex ].value
var day = dObj.options[ dObj.selectedIndex ].value
var yr = yObj.options[ yObj.selectedIndex ].value

Then the values are what you are asking about.
06-13-1990.jpeg

HonorGod

Thanks for the grade & points.

Good luck & have a great day.