0

In short this is the case, I want to create a form that consists of two parts with identity section_1 and section_2. In section_1 label B is input your birth date that will determine the input of age. Original condition send button is disabled.

The first question is how to input required in the contents can not be empty to make the send button is enabled and if the value of the label and more than 17 years, the condition section_2 should be disabled? This stage I use this code:

<form action="my_url" method="post">
<div id="section_1" style="padding:1em">
<p>
<label>A : </label><input id="entry_1" type="text" required="" />
</p>
<p>
<label>B : </label><input id="entry_2" type="text" required="" placeholder="dd/mm/yyyy" />
                    <input id="age" type="hidden" name="age"/>
</p>
<p>
<label>C : </label><input id="entry_3" type="text" />
</p>
</div>

<div id="section_2" style="padding:1em">
<p>
<label>D : </label><input id="entry_4" type="text" required="" />
</p>
<p>
<label>E : </label><input id="entry_5" type="text" required="" />
</p>
<p>
<label>F : </label><input id="entry_6" type="text" required="" />
</p>
</div>

<div>
<input id="send" type="submit" value="submit" />
</div>
</form>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>
    $(document).ready(function() {
        $('#entry_2').keyup(function() {
            if(isDate($('#entry_2').val())) {
                var age = calculateAge(parseDate($('#entry_2').val()), new Date());
                $("#age").val(age);
            } else {
                $("#age").val('');
            }
        });
        $('input[type="submit"]').prop('disabled', true);
        $('input[required]').keyup(function() {
            if($(this).val() != '') {
                $('input[type="submit"]').prop('disabled', false);
            }
            if($("#age").val() > 17) {
                $('#section_2').addClass('disabled');
                $('#section_2 input').prop({
                    'disabled': true,
                    'title': 'Skip this step'
                });
            } else if($("#age").val() < 17) {
                $('#section_2').removeClass('disabled');
                $('#section_2 input').prop({
                    'disabled': false,
                    'title': 'Must be filled'
                });
            }
        });
    });

    //convert the date string in the format of dd/mm/yyyy into a JS date object
    function parseDate(dateStr) {
        var dateParts = dateStr.split("/");
        return new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
    }

    //is valid date format
    function calculateAge(dateOfBirth, dateToCalculate) {
        var calculateYear = dateToCalculate.getFullYear();
        var calculateMonth = dateToCalculate.getMonth();
        var calculateDay = dateToCalculate.getDate();

        var birthYear = dateOfBirth.getFullYear();
        var birthMonth = dateOfBirth.getMonth();
        var birthDay = dateOfBirth.getDate();

        var age = calculateYear - birthYear;
        var ageMonth = calculateMonth - birthMonth;
        var ageDay = calculateDay - birthDay;

        if(ageMonth < 0 || (ageMonth == 0 && ageDay < 0)) {
            age = parseInt(age) - 1;
        }
        return age;
    }

    function isDate(txtDate) {
        var currVal = txtDate;
        if(currVal == '')
            return true;

        //Declare Regex
        var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
        var dtArray = currVal.match(rxDatePattern); // is format OK?

        if(dtArray == null)
            return false;

        //Checks for dd/mm/yyyy format.
        var dtDay = dtArray[1];
        var dtMonth = dtArray[3];
        var dtYear = dtArray[5];

        if(dtMonth < 1 || dtMonth > 12)
            return false;
        else if(dtDay < 1 || dtDay > 31)
            return false;
        else if((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
            return false;
        else if(dtMonth == 2) {
            var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
            if(dtDay > 29 || (dtDay == 29 && !isleap))
                return false;
        }

        return true;
    }
</script>

In this step seems almost succeeded, for input your birth date manually typed. And the second question is when I want to make the input date of birth for the better, I use datepick.js http://keith-wood.name/datepick.html but it fails because it can not identify the age input value input your date of birth. I add this code:

<link rel="stylesheet" type="text/css" href="css/jquery.datepick.css"/> 
<script type="text/javascript" src="js/jquery.plugin.js"></script> 
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript" src="js/jquery.jquery.datepick-id.js"></script>
<script>
$(function(){$('#entry_2').datepick({dateFormat:'dd/mm/yyyy'})});
</script>

Maybe someone can give ideas for a better solution than this.

Dyana Putry
  • 77
  • 1
  • 7

0 Answers0