Age Verifying Script, with different images showing at at different range of age

[reaphux]

Hi.

I'm setting up an alcohol website which requires age verifying. My knowledge in javascript is very limited.
I already have this age verify javascript which i've downloaded off net.

The problem is, i want a different image to show up at the bottom, when visitor selects their year.

Eg. if they select any year from 1970-1979, an image of wine bottle will show. If any year from 1980 to 1989 is selected, a beer image will show up.

Any help would be much appreciated.

The age verify script im using is as following.

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) {
				document.location = 'underage.html'; /* change to the underage url */
				return false;
			}
			else {
				return true;
			}
		}

<form action="index2.php" method="get" name="age_form"> 
Day : <select name="day"> 
	<option>1</option> 
	<option>2</option> 
	<option>3</option> 
	<option>4</option> 
	<option>5</option> 
	<option>6</option> 
	<option>7</option> 
	<option>8</option> 
	<option>9</option> 
	<option>10</option> 
	<option>11</option> 
	<option>12</option> 
	<option>13</option> 
	<option>14</option> 
	<option>15</option> 
	<option>16</option> 
	<option>17</option> 
	<option>18</option> 
	<option>19</option> 
	<option>20</option> 
	<option>21</option> 
	<option>22</option> 
	<option>23</option> 
	<option>24</option> 
	<option>25</option> 
	<option>26</option> 
	<option>27</option> 
	<option>28</option> 
	<option>29</option> 
	<option>30</option> 
	<option>31</option> 
</select>  
 
Month : <select name="month"> 
	<option>1</option> 
	<option>2</option> 
	<option>3</option> 
	<option>4</option> 
	<option>5</option> 
	<option>6</option> 
	<option>7</option> 
	<option>8</option> 
	<option>9</option> 
	<option>10</option> 
	<option>11</option> 
	<option>12</option> 
</select> 
 
Year : 
<select name="year"> 
	<option>2003</option> 
	<option>2002</option> 
	<option>2001</option> 
	<option>2000</option> 
	<option>1999</option> 
	<option>1998</option> 
	<option>1997</option> 
	<option>1996</option> 
	<option>1995</option> 
	<option>1994</option> 
	<option>1993</option> 
	<option>1992</option> 
	<option>1991</option> 
	<option>1990</option> 
	<option>1989</option> 
	<option>1988</option> 
	<option>1987</option> 
	<option>1986</option> 
	<option>1985</option> 
	<option>1984</option> 
	<option>1983</option> 
	<option>1982</option> 
	<option>1981</option> 
	<option>1980</option> 
	<option>1979</option> 
	<option>1978</option> 
	<option>1977</option> 
	<option>1976</option> 
	<option>1975</option> 
	<option>1974</option> 
	<option>1973</option> 
	<option>1972</option> 
	<option>1971</option> 
	<option>1970</option> 
	<option>1969</option>  
</select> 
 
 <br /><br />
<input type="submit" name="_send_date_" value="Let me in" onClick="return checkAge()"> 
</form>

[Taywin]

Where is the image area in your HTML code? Anyway, you may need to load both images but hide them while the page is being loaded (window.onload). Then you display a proper image when a proper value for date of birth is selected.

There is a problem in your code and I added the comment in it below.

/* 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);
 
            // What happen if a user select a month that has only 30 days, but
            // the day at 31? Your HTML allows that to happen but you do not
            // verify anything but attempt to create a date object right away.
            var theirDate = new Date((year + min_age), month, day);

[reaphux]

Hi Taywin. Thanks for the response.

I have not set the HTML code for the image to be loaded yet.

Re: problem in the code
Thats a good point. Will work on that soon.