Tuesday 27 August 2013

Birthday Dropdown using html and js validation


Birthday Dropdown using html and js , validation for selected year is not leaf year the day will show only 28 days
<html>
 <head>
 <script type="text/javascript">
  function call(){
 var kcyear = document.getElementsByName("year")[0],
  kcmonth = document.getElementsByName("month")[0],
  kcday = document.getElementsByName("day")[0];
       
 var d = new Date();
 var n = d.getFullYear();
 for (var i = n; i >= 1950; i--) {
  var opt = new Option();
  opt.value = opt.text = i;
  kcyear.add(opt);
    }
 kcyear.addEventListener("change", validate_date);
 kcmonth.addEventListener("change", validate_date);

 function validate_date() {
 var y = +kcyear.value, m = kcmonth.value, d = kcday.value;
 if (m === "2")
     var mlength = 28 + (!(y & 3) && ((y % 100) !== 0 || !(y & 15)));
 else var mlength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][m - 1];
 kcday.length = 0;
 for (var i = 1; i <= mlength; i++) {
     var opt = new Option();
     opt.value = opt.text = i;
     if (i == d) opt.selected = true;
     kcday.add(opt);
 }
     }
    validate_date();
  }
 </script>
 </head>
   <body>
        <div class="register-form-row">
      <div class="register-form-row-col">Date Of Birth :</div>
      <div class="register-form-row-col">Month :<select name="month" onchange="call()" >
         <option value="">select</option>
         <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>
        Day :<select name="day" >
           <option value="">select</option>
          </select>
        Year:<select name="year" onchange="call()">
           <option value="">select</option>
          </select>
               </div>
       </div>
   </body>
</html>
Demo
Date Of Birth :
Month : Day : Year: