Birthday - Age placeholder - Go

by Shankar

HTML

<div class="ageGate">
    <p>Please enter your birthday</p>
    <label for="birthMonth">Month</label>
    <input name="birthMonth" id="birthMonth" type="text" placeholder="MM" maxlength="2" size="2" class="birthdate" />
    <label for="birthDay">Day</label>
    <input name="birthDay" id="birthDay" type="text" placeholder="DD" maxlength="2" size="2" class="birthdate" />
    <label for="birthYear">Year</label>
    <input name="birthYear" id="birthYear" type="text" placeholder="YYYY" maxlength="4" size="4" class="birthdate" />
    <input type="submit" id="ageVerify" value="GO" class="submit" />
    <div class="result">
        <p></p>
    </div>
</div>
<!-- // ageGate -->

CSS

.ageGate .result {
    clear:left;
    margin-top:15px;
    font-size:20px;
    padding:20px;
}
.ageGate label {
    display:none;
}
.ageGate input {
    margin:0;
    color:#666;
    font-size:2em;
    display:block;
    float:left;
    text-align:center;
}

JavaScript

var NS = NS || {};
var NS = {
    ageGate: function () {
        var $month,
            $day,
            $year,
            $DOBinputs = $("input#birthMonth, input#birthDay, input#birthYear"),
            $submit = $("input.submit"),
            
            getDOB = function () {
                $month = parseInt($DOBinputs[0].value);
                $day = parseInt($DOBinputs[1].value);
                $year = parseInt($DOBinputs[2].value);
                
                return $month + '/' + $day + '/' + $year;
            },
            
            getAge = function(dateString) {
                var today = new Date(),
                    birthDate = new Date(dateString),
                    age = today.getFullYear() - birthDate.getFullYear(),

                    m = today.getMonth() - birthDate.getMonth();

                // if the birthday hasn't happened yet this year...
                if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                    // then we can't count the current year in the age.
                    age--;
                }
                return age;
            },
            
            ageGateValidate = function (e) {},
            
            ageGateSubmit = function (e) {
                e.preventDefault();
                var age = getAge(getDOB());
                
                // process different outcomes if this is a true age gate here:
                
                
                // display the age.
                $(".result p").text(age + " years old");
                
                //clear the inputs
                for (var x = 0; x < 3; x++) {
                    $DOBinputs[x].value = "";
                }
            };
        
        $submit.click(ageGateSubmit);
    }
}

$(document).ready(function () {
    NS.ageGate();
});