Member Avatar for 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>
  • 2 Contributors
  • 2 Replies
  • 116 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by reaphux

Dani AI

Generated

Short summary: has an age-gate in place but no image area yet; correctly flagged the date-validation risk (e.g., day 31 with a 30-day month) and suggested preloading. Below are practical, modern steps and a small, safe JavaScript pattern to switch an image based on the selected year, plus notes on validation, accessibility, and legal limits of client-side only checks.

Add a visible <img> (or SVG) placeholder inside the page and update its src when the year select changes. Keep a small mapping table of inclusive year ranges to image files, preload those files on load, and set meaningful alt text. The listener should parse the year, find the matching range, and swap the image; fall back to a neutral placeholder if no range matches.

const yearSelect = document.querySelector('select[name="year"]');
const preview = document.getElementById('agePreview');

const ranges = [
  {min: 1970, max: 1979, src: 'img/wine.png', alt: 'Wine bottle'},
  {min: 1980, max: 1989, src: 'img/beer.png', alt: 'Beer bottle'}
];

ranges.forEach(r => { const img = new Image(); img.src = r.src; });

function imageForYear(y) {
  if (!Number.isFinite(y)) return null;
  return ranges.find(r => y >= r.min && y <= r.max) || null;
}

function updatePreview() {
  const y = parseInt(yearSelect.value, 10);
  const r = imageForYear(y);
  if (r) { preview.src = r.src; preview.alt = r.alt; preview.hidden = false; }
  else { preview.src = 'img/placeholder.png'; preview.alt = 'Age preview'; }
}

yearSelect.addEventListener('change', updatePreview);
window.addEventListener('load', updatePreview);

Validate the entered day/month/year combo before computing age, as suggested. A compact validator checks that a Date constructed from the inputs matches the inputs:

function isValidDate(y, m, d) {
  const dt = new Date(y, m - 1, d);
  return dt.getFullYear() === y && dt.getMonth() === m - 1 && dt.getDate() === d;
}

Cautions and best practices: do not rely only on client-side checks for legal compliance — enforce age rules server-side and provide a non-JS fallback. Remember accessibility: visible labels, alt text, and keyboard access. Store consent in a session/cookie if the site design requires remembering the choice.

Recommended Answers

All 2 Replies

Member Avatar for 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);
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.