Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Make 3 fields for day, month and year, like almost any site online.<br /> Fill the fields up with values.<br /> Then you can populate the year dropdown according to your wishes.<br /> And you can simply use the change event to validate the other fields.<br /> Plus you can simply use day + month + year, make a date value, and compare with your_date &lt;= new date() <br /> Otherwise, you will have to worry about all the different dateformats a string can have, which makes it impossible to validate it.</p> <p>See here:<br /> <a href="https://stackoverflow.com/questions/6961007/birthday-form-using-html-php">Birthday form using HTML/PHP</a></p> <p>Something like this:</p> <pre><code>&lt;!doctype html&gt; &lt;html itemscope="itemscope" itemtype="http://schema.org/WebPage"&gt; &lt;head&gt; &lt;title&gt;Hello&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" &gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function isLeapYear(iYear) { return (new Date(iYear, 1, 29).getMonth() == 1); } function getMonthLength(month, year) { month = month - 1; var monthStart = new Date(year, month, 1); var monthEnd = new Date(year, month + 1, 1); var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24); return monthLength; } function PopulateDayDropdown(iMonth, iYear) { for (i = 1; i &lt; getMonthLength(iMonth, iYear) + 1; i++) { $('&lt;option/&gt;').val(i).html(i).appendTo('#selDay'); } } function PopulateMonthDropdown() { var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; for (i = 0; i &lt; months.length; i++) { $('&lt;option/&gt;').val(i + 1).html(months[i]).appendTo('#selMonth'); } } function PopulateYearDropdown() { var iCurYear = new Date().getFullYear(); for (i = iCurYear - 100; i &lt;= iCurYear; i++) { $('&lt;option/&gt;').val(i).html(i).appendTo('#selYear'); } //$('select option[value="' + iCurYear + '"]').html(); $('#selYear option[value="' + iCurYear + '"]').attr("selected", "selected") } $(document).ready(function () { // Handler for .ready() called. PopulateDayDropdown(1, new Date().getFullYear()); PopulateMonthDropdown(); PopulateYearDropdown(); //$('select[name="month"]').change(function() $('select').change(function () { //alert("2012 leap year? " + isLeapYear(2012) + "\n" + "2013 leap year? " + ); var iDay = $("#selDay").val(); var iMonth = $("#selMonth").val(); var iYear = $("#selYear").val(); if (this.id == "selMonth" || this.id == "selYear") { $('#selDay').empty(); PopulateDayDropdown(iMonth, iYear); $('#selDay option[value="' + iDay + '"]').attr("selected", "selected") } if (iDay &gt; getMonthLength(iMonth, iYear)) { var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; alert("There is no " + iDay + "th " + months[iMonth - 1] + "."); } var d = new Date(iYear, iMonth - 1, iDay, 0, 0, 0, 0); if (d &gt; new Date()) { $('#selDay option[value="' + 1 + '"]').attr("selected", "selected") $('#selMonth option[value="' + 1 + '"]').attr("selected", "selected") alert("Future dates are not allowed (values have been reset to January 1st)."); return; } alert("New date of birth: " + d); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="registration.php" method="post"&gt; &lt;p&gt;Select date:&lt;/p&gt; &lt;select id="selDay" name="day"&gt; &lt;/select&gt; &lt;select id="selMonth" name="month"&gt; &lt;!-- &lt;option value="January"&gt;January&lt;/option&gt; &lt;option value="February"&gt;February&lt;/option&gt; &lt;option value="Mars"&gt;Mars&lt;/option&gt; &lt;option value="April"&gt;April&lt;/option&gt; &lt;option value="May"&gt;May&lt;/option&gt; &lt;option value="June"&gt;June&lt;/option&gt; &lt;option value="July"&gt;July&lt;/option&gt; &lt;option value="September"&gt;September&lt;/option&gt; &lt;option value="October"&gt;October&lt;/option&gt; &lt;option value="November"&gt;November&lt;/option&gt; &lt;option value="December"&gt;December&lt;/option&gt; --&gt; &lt;/select&gt; &lt;select id="selYear" name="year"&gt; &lt;/select&gt; &lt;br/&gt;&lt;br/&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload