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

souldigitalAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
HonorGodSoftware EngineerCommented:
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
HonorGodSoftware EngineerCommented:
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
HonorGodSoftware EngineerCommented:
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
HonorGodSoftware EngineerCommented:
hm.  Oversight on my part.  Sorry, one moment please.
0
HonorGodSoftware EngineerCommented:
> 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
HonorGodSoftware EngineerCommented:
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
HonorGodSoftware EngineerCommented:
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
HonorGodSoftware EngineerCommented:
Thanks for the grade & points.

Good luck & have a great day.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.