16 berichten aan het bekijken - 1 tot 16 (van in totaal 16)
  • Q:
    Bijdrager
    Jesper

    Leeftijdscheck pagina

    Hallo Mensen,

    Ik wil voor een website een leeftijdscheck pagina maken waarbij je minimaal 18 jaar moet zijn om verder te kunnen. Gewoon in HTML met Javascript. In de vorm van invoervelden, dus geen comboboxen!

    Eigenlijk is het voorbeeld van http://www.heineken.nl precies wat ik zoek. Ik zie alleen door de bomen het bos niet meer, als ik kijk welke code er nodig is voor de leeftijdscheck.

    Weet iemand hier hoe ik dit eenvoudig kan maken? Ik weet ook wel dat mensen een fake leeftijd kunnen opgeven of gewoon de hele pagina kunnen omzeilen, maar het gaat erom dat de pagina aanwezig is en mensen zich er van bewust zijn.

    Bijdrager
    Wyodor

    Als je een Fake leeftijd kan opgeven waarom dan geen fake pagina waar je het invoert.

    Een FORM maken met de leeftijdsvelden en een accoord knop.

    Niks controleren en doorgaan.

    Of anders elke dag de datum dat je 18 wordt voorinvullen.

    Of anders effe zoeken :

    http://www.google.nl/search?q=javascript+age+check

    Deze : http://www.kuranes.co.uk/utils/agecheck.html

    Bijdrager
    Jakko Westerbeke

    Inderdaad, gewoon een invulveld voor de leeftijd, gekoppeld aan een beetje JavaScript dat kijkt of de ingevulde waarde wel ? 18 is, en zo nee, een melding daarvan geeft, of zo ja, de volgende pagina laadt. Klaar. Echte controle kun je toch niet doen op deze manier, want iedereen die dat wil kan een valse leeftijd opgeven.

    Bijdrager
    Wyodor

    Het JavaScript staat in de broncode van de pagina bij Kuranes.

    Bijdrager
    Thoomas

    Deze heb ik op internet gevonden, en vond ik wel aardig:

    <br />
    <script type="text/javascript"><br />
    function showAge()<br />
    {<br />
     var submitObj = document.getElementById("reg1");<br />
     var msg,msg1="<span style='color:#f00;'>You cannot register, you must be over 18 years.</span>",msg2="<span style='color:#0f0;'>You are old enough to register.";<br />
     var d=document.getElementById('txt').value.split("/");<br />
     if(d[2])<br />
     {<br />
      if(d[2].length>=4)<br />
      {<br />
       var today=new Date();<br />
       var tyr=today.getFullYear();<br />
       var tmo=today.getMonth();<br />
       var tday=today.getDate();</p>
    <p>   var bday=parseInt(d[0]);<br />
       var byr=parseInt(d[2]);<br />
       var bmo=parseInt(d[1]-1);</p>
    <p>   var age=tyr-byr;<br />
       if((tmo == bmo) && (tday < bday) || (tmo<bmo)){age=age-1;}<br />
       if(age>17)<br />
       {<br />
        msg=msg2;<br />
        submitObj.style.visibility = "visible";<br />
        }<br />
       else<br />
       {<br />
        msg=msg1;<br />
        submitObj.style.visibility = "hidden";<br />
        }<br />
       document.getElementById("age").innerHTML = msg;<br />
       }<br />
      }<br />
     }<br />
    </script><br />
    </head><br />
    <body><br />
    <form action="" method=""><br />
    Insert your date of birth in format dd/mm/yyyy<br />
    <input id="txt" type="text" onkeyup="showAge()">  <span id="age"></span></p>
    <p><input type="submit" id="reg1" value="Register" style="visibility:hidden;"><br />
    </form><br />
     
    Bijdrager
    Jesper
    Wyodor op 06 augustus 2010

    Of anders effe zoeken :
    http://www.google.nl/search?q=javascript+age+check
    Deze : http://www.kuranes.co.uk/utils/agecheck.html

    Dat is een voorbeeld met comboboxes en ik wil graag invoervelden.

    Bijdrager
    Yaris

    Waarom niet een intropagina maken zoals op die sites met content voor volwassenen? Een simpele tekst “Ik ben 18 jaar of ouder” met twee knopjes: ja / nee.

    Bijdrager
    Jesper
    Yaris op 06 augustus 2010

    Waarom niet een intropagina maken zoals op die sites met content voor volwassenen? Een simpele tekst “Ik ben 18 jaar of ouder” met twee knopjes: ja / nee.

    Omdat ik anders deze vraag niet zou stellen:razz: Ik wil dus echt invoervelden :innocent:

    Bijdrager
    Wyodor

    @Jesper

    Gebruik dan invoervelden.

    Het gaat om het JavaScript dat die velden controleert.

    Bovendien, met zoveel pretenties zou ik me generen voor dit soort vragen :

    http://www.intensivedesign.com/

    Bijdrager
    Wyodor

    Hier, omdat professionals het ook niet altijd makkelijk hebben :

    <input name="day" type="text" value="01" maxlength="2" style="width: 25px"><br />
    <input name="month" type="text" value="01" maxlength="2" style="width: 25px"><br />
    <input name="year" type="text" value="2010" maxlength="4" style="width: 50px">
    Sleutelbeheerder
    Night
    <br />
    <div  id="ageCheck" class="ageCheckBox"><br />
    	            <h1 class="img tAgeCheckH">om heineken.nl te bezoeken moet je 18 jaar of ouder zijn.</h1><br />
    	            <div class="formAgeCheck"><br />
    	                <div class="floatLeft"></p>
    <p>	                 <input name="ctl00$ctrlAgeCheck$txtDay" type="text" value="DD" maxlength="2" id="ctl00_ctrlAgeCheck_txtDay" type="text" onKeyUp="return autoTab(this,document.getElementById('ctl00_ctrlAgeCheck_txtMonth'), 2, event);" onfocus="onDateTextBoxFocus(this,'DD');" onblur="onDateTextBoxBlur(this,'DD');" /><br />
    	                    <span class="separator">/</span><br />
    	                     <input name="ctl00$ctrlAgeCheck$txtMonth" type="text" value="MM" maxlength="2" id="ctl00_ctrlAgeCheck_txtMonth" onKeyUp="return autoTab(this,document.getElementById('ctl00_ctrlAgeCheck_txtYear'), 2, event);" onfocus="onDateTextBoxFocus(this,'MM');" onblur="onDateTextBoxBlur(this,'MM');" /><br />
    	                    <span class="separator">/</span><br />
    	                     <input name="ctl00$ctrlAgeCheck$txtYear" type="text" value="JJJJ" maxlength="4" id="ctl00_ctrlAgeCheck_txtYear" class="year" onKeyUp="return autoTab(this,document.getElementById('ctl00_ctrlAgeCheck_bntCheck'), 4, event);" onfocus="onDateTextBoxFocus(this,'JJJJ');" onblur="onDateTextBoxBlur(this,'JJJJ');" /><br />
    	                </div></p>
    <p>	                <a href="__doPostBack('ctl00$ctrlAgeCheck$bntCheck','')">verder</a></p>
    <p>	                <div class="clear">&nbsp;</div></p>
    <p>	                <div class="remember"><br />
    	                    <span id="errMessage"class="fixErr" style="display:none;"><br />
    	                        <span class="msgError">Vul een geldige datum in.</span><br />
    	                    </span><br />
    	                    <div class="clear">&nbsp;</div><br />
    	                    <a href="void(0);"><br />
    	                        <div id="ctl00_ctrlAgeCheck_imgRememberCheckBox" class="imgRememberCheck">&nbsp;</div> <!--class="imgRemember"--><br />
    	                        <h2 class="img tOnthoudMij">Onthoud mij</h2><br />
    	                    </a><br />
    	                    <span style="display:none;"><input id="ctl00_ctrlAgeCheck_cbRememberMe" type="checkbox" name="ctl00$ctrlAgeCheck$cbRememberMe" /></span><br />
    	                    <div class="clear">&nbsp;</div><br />
    	                    <div class="textAgeCheck">Vink dit vakje niet aan als de computer door meerdere mensen gebruikt wordt.</div><br />
    	                </div><br />
     
    Bijdrager
    Jesper

    Bedankt voor jullie hulp. Ik denk dat ik toch maar die combobox versie neem en hem zelf aanpas.

    @ Wyodor
    Die site is al 2 jaar niet bijgewerkt en ik doe steeds minder met websites, ik gebruik ook zelden Javascript. Binnenkort komt er een update van mijn website en zal ik me meer gaan richten op het maken van animaties.

    Bijdrager
    sturb

    quick and dirty javascript

    <br />
    function check(){<br />
    	fo = document.forms['formulier'];<br />
    	/*ch = 2010-18; zie volgende post*/<br />
    	d = new Date();<br />
    	ch = d.getFullYear()-18;<br />
    	if(fo.elements['jaartal'].value <= ch){<br />
    		window.location.href = 'linkje hier'<br />
    	}else{<br />
    		window.location.href = 'http://www.donaldduck.nl';<br />
    	}<br />
    }<br />
     

    html code:

    <br />
    <form name='formulier' action='#'><br />
    Je geboortejaar: <input type='text' name='jaartal'><br />
    <button onclick="check()">Ga door »</button><br />
    </form><br />
     
    Bijdrager
    Jakko Westerbeke
    sturb op 06 augustus 2010

    quick and dirty javascript

    Ik zou wel even deze regel:

    	ch = 2010-18;

    vervangen door deze twee:

    	d = new Date();<br />
    	ch = d.getFullYear()-18;

    anders werkt het script volgend jaar niet meer helemaal zoals gewild:)

    Bijdrager
    sturb

    Zoals ik al zei, quick and dirty. Werk normaal gesproken nooit met het date object:) En had geen zin om het uit te zoeken:)

    Het kan sowieso een stuk netter en uitgebreider.

    Bijdrager
    Jakko Westerbeke

    Eigenlijk denk ik dat jouw oplossing waarschijnlijk de beste is die aangedragen werd — namelijk heel kort en eenvoudig. Misschien is het nog net wat beter om het tekstvak te vervangen door een <select>-menu, maar meer dan dat zou ik zelf niet doen, denk ik.

16 berichten aan het bekijken - 1 tot 16 (van in totaal 16)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.