• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2699
  • Last Modified:

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

0
souldigital
Asked:
souldigital
  • 9
  • 6
1 Solution
 
HonorGodCommented:
Wouldn't something like this be easier?
<!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 ageCheck( obj ) {
    if ( obj ) {
      var val  = obj.value
      var data = val.match( /^(\d{1,2}[-\/]\d{1,2}[-\/]\d{4})$/ )
      if ( data ) {
        var dob = new Date( val )
        var now = new Date()
        var years = now.getFullYear() - dob.getFullYear()
        alert( 'Age: ' + years )
      } else {
        alert( 'invalid date format specified: ' + val )
        obj.value = ''
      }
    } else {
      alert( 'input field not specified' )
    }
  }
</script>
</head>
<body>
  <div id="main">
    <table border="0">
      <tr>
        <td>DOB:</td>
        <td>
          <input type='text' onblur='ageCheck(this)'/>
        </td>
 
      </tr>
    </table>
  </div>
</body>
</html>

Open in new window

0
 
souldigitalAuthor Commented:
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
0
 
HonorGodCommented:
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

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
souldigitalAuthor Commented:
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

0
 
HonorGodCommented:
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)
0
 
HonorGodCommented:
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...
0
 
souldigitalAuthor Commented:
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

0
 
souldigitalAuthor Commented:
What do you think?
0
 
HonorGodCommented:
hm.  Oversight on my part.  Sorry, one moment please.
0
 
HonorGodCommented:
> 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
0
 
souldigitalAuthor Commented:
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
0
 
HonorGodCommented:
So is there a problem?
0
 
souldigitalAuthor Commented:
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
0
 
HonorGodCommented:
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
0
 
HonorGodCommented:
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now