Monday 7 January 2019

Bootstrap Forms with validation

HTML CODE:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="/sites/connect/Style Library/Homepage/js/jquery.min.js"></script>
    <script src="/sites/connect/Style Library/Homepage/js/jquery-ui.js"></script>
    <script src="/sites/connect/Style Library/Homepage/js/jquery.SPServices.js"></script>
    <script src="/sites/connect/Style Library/Homepage/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/sites/connect/Style Library/Homepage/css/jquery-ui.css">
    <link rel="stylesheet" href="/sites/connect/Style Library/Homepage/css/bootstrap.min.css">
    <link rel="stylesheet" href="/sites/connect/Style Library/Homepage/css/Empjoiningform.css">
    <link rel="stylesheet" href="/sites/connect/Style Library/Homepage/css/Gratuityform.css">
    <style>
        .chkunmarried {
            display: none;
        }

        #labdrpdepart {
            font-size: smaller;
            font-weight: 200;
        }

        #labpfnomiation {
            font-size: smaller;
        }

        #drpdependentdetails {
            height: 30px;
        }

        .aligncenter {
            text-align: center;
            padding: 12px 0px 11px !important;
            line-height: 30px;
        }
    </style>
    <script>

        function isLeapYear(year) {
            var d = new Date(year, 1, 28);
            d.setDate(d.getDate() + 1);
            return d.getMonth() == 1;
        }

        function getAge(currentdate) {
            var d = new Date(currentdate), now = new Date();
            var years = now.getFullYear() - d.getFullYear();
            d.setFullYear(d.getFullYear() + years);
            if (d > now) {
                years--;
                d.setFullYear(d.getFullYear() - 1);
            }
            var days = (now.getTime() - d.getTime()) / (3600 * 24 * 1000);
            return years + days / (isLeapYear(now.getFullYear()) ? 366 : 365);
            //alert(years);

        }

        //var date = '1685-03-21';

        var currentdate = '';
        $(function () {
            $("#txtdob").datepicker({
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true,
                maxDate: '+0d',
                //defaultDate: '-12yr',

            }).on('change', function () {
                var currentdate = $("#txtdob").val();
                var datespilt = currentdate.split("/");
                currentdate = datespilt[1] + "/" + datespilt[0] + "/" + datespilt[2];
                var age = getAge(currentdate);
                $("#txtage").val("");
                $("#txtage").val(Math.floor(getAge(currentdate)));
            });
            $("#txtpdoj").datepicker({
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true
            });
            $("#txtpfdoj").datepicker({
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true
            });
            $("#txtpfdoe").datepicker({
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                changeYear: true
            });
            $('#samepermaddress').change(function () {
                if ($(this).is(":checked")) {
                    $("#txtpostaladdr").val($("#txtpermanentaddr").val())
                }
                else {
                    $("#txtpostaladdr").val("");
                }
            });
            $('#samegratuitynominees').change(function () {
                if ($(this).is(":checked")) {
                    $(".pfform").hide();
                }
                else {
                    $(".pfform").show();
                }
            });
            $(".gfrelationshipcls").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option>');
            $(".pfrelationshipcls").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option>');

            $(".gfrelationshipcls").on('change', function () {
                switch ($(this).val()) {
                    case 'Father':
                        if ($("#txtfathername").val() != "" && $("#txtfatherage").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtfathername").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtfatherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Father name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Mother':
                        if ($("#txtmothername").val() != "" && $("#txtmotherage").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtmothername").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtmotherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Mother name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Spouse':
                        if ($("#txtspousename").val() != "" && $("#txtspouseage").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtspousename").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtspouseage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Spouse name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 1':
                        if ($("#txtchildname1").val() != "" && $("#txtchildage1").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtchildname1").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtchildage1").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Child 1 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 2':
                        if ($("#txtchildname2").val() != "" && $("#txtchildage2").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtchildname2").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtchildage2").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Child 2 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Select':
                        break;

                }
            });
            $(".pfrelationshipcls").on('change', function () {
                switch ($(this).val()) {
                    case 'Father':
                        if ($("#txtfathername").val() != "" && $("#txtfatherage").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtfathername").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtfatherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Father name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Mother':
                        if ($("#txtmothername").val() != "" && $("#txtmotherage").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtmothername").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtmotherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Mother name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Spouse':
                        if ($("#txtspousename").val() != "" && $("#txtspouseage").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtspousename").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtspouseage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Spouse name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 1':
                        if ($("#txtchildname1").val() != "" && $("#txtchildage1").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtchildname1").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtchildage1").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Child 1 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 2':
                        if ($("#txtchildname2").val() != "" && $("#txtchildage2").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtchildname2").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtchildage2").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Child 2 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Select':
                        break;

                }
            });
            $('input[name=maritalstatus]').change(function () {
                if (this.value == 'Unmarried') {
                    $(".chkunmarried").hide();
                    $(".gfrelationshipcls").empty();
                    $(".pfrelationshipcls").empty();
                    $(".gfrelationshipcls").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option>');
                    $(".pfrelationshipcls").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option>');
                }
                else if (this.value == 'Married') {
                    $(".chkunmarried").show();
                    $(".gfrelationshipcls").empty();
                    $(".pfrelationshipcls").empty();
                    $(".gfrelationshipcls").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option><option value="Spouse">Spouse</option><option value="Child 1">Child 1</option><option value="Child 2">Child 2</option>');
                    $(".pfrelationshipcls").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option><option value="Spouse">Spouse</option><option value="Child 1">Child 1</option><option value="Child 2">Child 2</option>');
                }
            });
            $("#txtempcode").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtage").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtmobilenumber").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }

            });
            $("#txtemgcontentno").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtchildage2").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtnomineeage").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtpfnomiage").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtpfUAN").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });
            $("#txtpfaadharnumber").keypress(function (eve) {
                if ((eve.which != 46 || $(this).val().indexOf('.') == -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
                    eve.preventDefault();
                }
            });


        });
        var gfname = '';
        var gfage = '';
        var gfrelationship = '';
        var gfproportion = '';
        var pfname = '';
        var pfage = '';
        var pfrelationship = '';
        var pfproportion = '';
        function Addemployeedetails() {

            var Email = $("#txtemailid").val();
            if ($.trim($("#txtempcode").val()) == "" || $.trim($("#txtempcode").val()) == null) {
                alert("Please enter Employee Code")
                document.getElementById("txtempcode").focus();
                return false;
            }
            else if ($.trim($("#txtempname").val()) == "" || $.trim($("#txtempname").val()) == null) {
                alert("Please enter Name")
                document.getElementById("txtempname").focus();
                return false;
            }
            else if ($.trim($("#txtdob").val()) == "" || $.trim($("#txtdob").val()) == null) {
                alert("Please enter DOB")
                document.getElementById("txtdob").focus();
                return false;
            }
            else if ($.trim($("#txtage").val()) == "" || $.trim($("#txtage").val()) == null) {
                alert("Please enter Age")
                document.getElementById("txtage").focus();
                return false;
            }
            else if ($('input[name=gender]:checked').val() == "" || $('input[name=gender]:checked').val() == null) {
                alert("Please select Sex")
                document.getElementsByName('gender')[0].focus();
                return false;
            }
            else if ($('input[name=maritalstatus]:checked').val() == "" || $('input[name=maritalstatus]:checked').val() == null) {
                alert("Please select Marital Status")
                document.getElementsByName('maritalstatus')[0].focus();
                return false;
            }
            else if ($.trim($("#txtpdoj").val()) == "" || $.trim($("#txtpdoj").val()) == null) {
                alert("Please enter Date of Joining/ Date of Entry Into Employment")
                document.getElementById("txtpdoj").focus();
                return false;
            }
            else if ($.trim($("#txtreligion").val()) == "" || $.trim($("#txtreligion").val()) == null) {
                alert("Please enter Religion")
                document.getElementById("txtreligion").focus();
                return false;
            }
            else if ($.trim($("#txtdesignation").val()) == "" || $.trim($("#txtdesignation").val()) == null) {
                alert("Please enter Designation")
                document.getElementById("txtdesignation").focus();
                return false;
            }
            else if ($("#drpdepartment").val() == "Select") {
                alert("Please select Department")
                document.getElementById("drpdepartment").focus();
                return false;
            }

            else if ($.trim($("#txtemailid").val()) == "" || $.trim($("#txtemailid").val()) == null) {
                alert("Please enter Email Id")
                document.getElementById("txtemailid").focus();
                return false;
            }
            else if (!ValidateEmail(Email)) {
                alert('Invalid Email Address');
                document.getElementById("txtemailid").focus();
                return false;
            }
            else if ($.trim($("#txtmobilenumber").val()) == "" || $.trim($("#txtmobilenumber").val()) == null) {
                alert("Please enter Mobile Number");
                document.getElementById("txtmobilenumber").focus();
                return false;
            }
            else if ($.trim($("#txtemgcontentno").val()) == "" || $.trim($("#txtemgcontentno").val()) == null) {
                alert("Please enter Emergency Contact Number");
                document.getElementById("txtemgcontentno").focus();
                return false;
            }
            else if ($.trim($("#txtpfaadharnumber").val()) == "" || $.trim($("#txtpfaadharnumber").val()) == null) {
                alert("Please enter Aadhar Number");
                document.getElementById("txtpfaadharnumber").focus();
                return false;
            }
            else if ($.trim($("#txtpfpanno").val()) == "" || $.trim($("#txtpfpanno").val()) == null) {
                alert("Please enter PAN Number");
                document.getElementById("txtpfpanno").focus();
                return false;
            }
            if ($.trim($("#txtpfpanno").val()) != "" || $.trim($("#txtpfpanno").val()) != null) {
                //var regex = /[a-zA-Z]{3}[PCHFATBLJG]{1}[a-zA-Z]{1}[0-9]{4}[a-zA-Z]{1}$/;
                var txt = $("#txtpfpanno").val().toUpperCase();
                var regex = /[a-zA-Z]{3}[P]{1}[a-zA-Z]{1}[0-9]{4}[a-zA-Z]{1}$/;
                //var pan = { C: "Company", P: "Personal", H: "Hindu Undivided Family (HUF)", F: "Firm", A: "Association of Persons (AOP)", T: "AOP (Trust)", B: "Body of Individuals (BOI)", L: "Local Authority", J: "Artificial Juridical Person", G: "Govt" };
                var pan = { P: "Personal" };
                pan = pan[txt[3]];
                if (regex.test(txt)) {
                    if (pan != "undefined") {
                        //alert("ok");
                    }
                    else {
                        alert("Please enter valid PAN Number. Fourth character should be 'P'");
                        return false;
                    }

                }
                else {
                    alert("Please enter valid PAN Number. Fourth character should be 'P'");
                    return false;
                }

            }

            if ($.trim($("#txtpfUAN").val()) != "" || $.trim($("#txtpfUAN").val()) != null) {
                var aadhar = $("#txtpfUAN").val();
                var adharcardTwelveDigit = /^\d{12}$/;
                //var adharSixteenDigit = /^\d{16}$/;
                if (aadhar != '') {
                    if (aadhar.match(adharcardTwelveDigit)) {
                        //return true;
                    }
                    else {
                        alert("Enter valid UAN Number");
                        return false;
                    }
                }

            }
            if ($.trim($("#txtpfaadharnumber").val()) != "" || $.trim($("#txtpfaadharnumber").val()) != null) {
                var aadhar = $("#txtpfaadharnumber").val();
                var adharcardTwelveDigit = /^\d{12}$/;
                //var adharSixteenDigit = /^\d{16}$/;
                if (aadhar != '') {
                    if (aadhar.match(adharcardTwelveDigit)) {
                        //return true;
                    }
                    else {
                        alert("Enter valid Aadhar Number");
                        return false;
                    }
                }

            }
            setTimeout(function () {
                $("#loader").show();
                $(".loaderbackgroundcls").css("opacity", 0.3);
                addwithvalidation();
                //$("#loader").show();
                //$(".loaderbackgroundcls").css("opacity", 0.3);
            }, 100);


        }
        function addwithvalidation() {
            $("#loader").show();
            $(".loaderbackgroundcls").css("opacity", 0.3);
            var bankaccount = '';
            bankaccount = $("#txtpfbankaccount").val() + ";IFSC Code- " + $("#txtpfifsccode").val();
            var permanentaddress = '';
            var temporyaddress = '';
            if ($('#txtpermanentaddr').val() != "") {
                permanentaddress = $('#txtpermanentaddr').val().replace(/\n/g, "<br />");
                permanentaddress = "<div>" + permanentaddress + "</div>";
            }
            if ($('#txtpostaladdr').val() != "") {
                temporyaddress = $('#txtpostaladdr').val().replace(/\n/g, "<br />");
                temporyaddress = "<div>" + temporyaddress + "</div>";
            }
            $(".gfform tr.gftrcls").each(function () {
                $this = $(this)
                if ($this.find("input.gfnamecls").val() != null) {
                    gfname += $this.find("input.gfnamecls").val() + ";";
                }
                if ($this.find("input.gfagecls").val() != null) {
                    gfage += $this.find("input.gfagecls").val() + ";";
                }
                if ($this.find("select.gfrelationshipcls").val() != null) {
                    gfrelationship += $this.find("select.gfrelationshipcls").val() + ";";
                }
                if ($this.find("input.gfproportioncls").val() != null) {
                    gfproportion += $this.find("input.gfproportioncls").val() + ";";
                }


            });
            $(".pfform tr.pftrcls").each(function () {
                $this = $(this)
                if ($this.find("input.pfnamecls").val() != null) {
                    pfname += $this.find("input.pfnamecls").val() + ";";
                }
                if ($this.find("input.pfagecls").val() != null) {
                    pfage += $this.find("input.pfagecls").val() + ";";
                }
                if ($this.find("select.pfrelationshipcls").val() != null) {
                    pfrelationship += $this.find("select.pfrelationshipcls").val() + ";";
                }
                if ($this.find("input.pfproportioncls").val() != null) {
                    pfproportion += $this.find("input.pfproportioncls").val() + ";";
                }
            });

            if ($("input[name='samegratuitynominee']:checked").val() == "yes") {
                pfname = gfname;
                pfage = gfage;
                pfrelationship = gfrelationship;
                pfproportion = gfproportion;
            }
            var permanent = SP.Utilities.HttpUtility.htmlEncode(permanentaddress);
            var tempory = SP.Utilities.HttpUtility.htmlEncode(temporyaddress);
            $().SPServices({
                operation: "UpdateListItems",
                async: false,
                batchCmd: "New",
                listName: "Employee Joining Details",
                valuepairs: [["Title", $("#txtempcode").val() == 'undefined' ? "" : $("#txtempcode").val()],
                ["Name", $("#txtempname").val() == 'undefined' ? "" : $("#txtempname").val()],
                ["DOB", $("#txtdob").val() == 'undefined' ? "" : $("#txtdob").val()],
                ["Age", $("#txtage").val() == 'undefined' ? "" : $("#txtage").val()],
                ["Sex", $('input[name=gender]:checked').val()],
                ["Marital_x0020_status", $('input[name=maritalstatus]:checked').val()],
                ["Permanent_x0020_address", permanent],
                ["Postal_x0020_Address", tempory],
                ["Date_x0020_of_x0020_Joining_x002", $("#txtpdoj").val() == 'undefined' ? "" : $("#txtpdoj").val()],
                ["Religion", $("#txtreligion").val() == 'undefined' ? "" : $("#txtreligion").val()],
                ["Designation", $("#txtdesignation").val() == 'undefined' ? "" : $("#txtdesignation").val()],
                ["Department", $("#drpdepartment").val() == 'undefined' ? "" : $("#drpdepartment").val()],
                ["Email_x0020_id", $("#txtemailid").val() == 'undefined' ? "" : $("#txtemailid").val()],
                ["Mobile_x0020_number", $("#txtmobilenumber").val() == 'undefined' ? "" : $("#txtmobilenumber").val()],
                ["Emergency_x0020_contact_x0020_nu", $("#txtemgcontentno").val() == 'undefined' ? "" : $("#txtemgcontentno").val()],
                ["Blood_x0020_group", $("#txtbloodgrp").val() == 'undefined' ? "" : $("#txtbloodgrp").val()],
                ["MC_Fathers_x0020_name", $("#txtfathername").val() == 'undefined' ? "" : $("#txtfathername").val()],
                ["MC_Father_x0020_Age_x002f__x0020", $("#txtfatherage").val() == 'undefined' ? "" : $("#txtfatherage").val()],
                ["MC_Mothers_x0020_name", $("#txtmothername").val() == 'undefined' ? "" : $("#txtmothername").val()],
                ["MC_Mothers_x0020_Age_x002f__x002", $("#txtmotherage").val() == 'undefined' ? "" : $("#txtmotherage").val()],
                ["MC_Spouse_x0020_name", $("#txtspousename").val() == 'undefined' ? "" : $("#txtspousename").val()],
                ["MC_Spouse_x0020_name_x0020_Age_x", $("#txtspouseage").val() == 'undefined' ? "" : $("#txtspouseage").val()],
                ["MC_Child_x0020_name1", $("#txtchildname1").val() == 'undefined' ? "" : $("#txtchildname1").val()],
                ["MC_Child_x0020_name1_x0020_Age_x", $("#txtchildage1").val() == 'undefined' ? "" : $("#txtchildage1").val()],
                ["MC_Child_x0020_name2", $("#txtchildname2").val() == 'undefined' ? "" : $("#txtchildname2").val()],
                ["MC_Child_x0020_name2_x0020_Age_x", $("#txtchildage2").val() == 'undefined' ? "" : $("#txtchildage2").val()],
                ["GN_Name", gfname],
                ["GN_Age", gfage],
                ["GN_Relationship", gfrelationship],
                ["GN_Propotion", gfproportion],
                ["PF_Previous_x0020_company_x0020_", $("#txtpfcompanyname").val() == 'undefined' ? "" : $("#txtpfcompanyname").val()],
                ["PF_UAN", $("#txtpfUAN").val() == 'undefined' ? "" : $("#txtpfUAN").val()],
                ["PF_x0020_account_x0020_number", $("#txtpfaccountname").val() == 'undefined' ? "" : $("#txtpfaccountname").val()],
                ["PF_DOJ", $("#txtpfdoj").val() == 'undefined' ? "" : $("#txtpfdoj").val()],
                ["PF_DOE", $("#txtpfdoe").val() == 'undefined' ? "" : $("#txtpfdoe").val()],
                ["PF_Aadhar_x0020_number", $("#txtpfaadharnumber").val() == 'undefined' ? "" : $("#txtpfaadharnumber").val()],
                ["PF_Bank_x0020_Name", $("#txtpfbankname").val() == 'undefined' ? "" : $("#txtpfbankname").val()],
                ["PF_PAN_x0020_number", $("#txtpfpanno").val() == 'undefined' ? "" : $("#txtpfpanno").val().toUpperCase()],
                ["PF_Bank_x0020_account_x0020_numb", bankaccount],
                ["PFN_Name", pfname],
                ["PFN_Age", pfage],
                ["PFN_Relationship", pfrelationship],
                ["PFN_Propotion", pfproportion]],
                completefunc: function (xData, Status) {
                    if (Status == "success" && xData.responseXML.all[7].textContent == "") {
                        alert("Submitted Successfully")
                        window.location.href = " /sites/cconnect/HR123/SitePages/Home.aspx";
                        $("#loader").hide();
                        $(".loaderbackgroundcls").css("opacity", 0.3);

                    }
                    else {
                        alert("Something went wrong. Contact administrator");
                        $("#loader").hide();
                        $(".loaderbackgroundcls").css("opacity", 0.3);
                    }
                }
            });
        }
        function clearall() {
            $("input:text").val("");
            $(".clstxtarea").val("");
            $(':radio').prop('checked', false)
            $(':checkbox').prop('checked', false)
            $("#drpdepartment").val("Select")
            $("#drpdependentdetails").empty();
            $("#drpdependentdetails").append('<option value = "Select" >Select</option ><option value="Father">Father</option><option value="Mother">Mother</option>');
            $(".chkunmarried").hide()

        }
        function ValidateEmail(Email) {
            var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            return expr.test(Email);
        }
        var i = 1;
        function addrow() {
            if ($('input[name=maritalstatus]:checked').val() == 'Unmarried') {
                var data = "<tr id='rec" + i + "' class='gftrcls'>";
                data += "<td><input type='text' class='form-control gfnamecls' id='gfname" + i + "' readonly/></td><td><input type='text' id='gfage" + i + "'class='form-control gfagecls' readonly/></td> <td><select id='gfrelationship" + i + "' class='gfrelationshipcls form-control'><option value = 'Select' >Select</option ><option value='Father'>Father</option><option value='Mother'>Mother</option></select></td><td><input type='text' id='gfproportion" + i + "'class='form-control gfproportioncls' /></td><td class='aligncenter'><a id='delete" + i + "'  class='buttonname' onclick='delrow(this);'><i class='glyphicon glyphicon-trash'></a></td></tr>";
                $('.gfform').append(data);
                i++;
            }
            else if ($('input[name=maritalstatus]:checked').val() == 'Married') {
                var data = "<tr id='rec" + i + "' class='gftrcls'>";
                data += "<td><input type='text' class='form-control gfnamecls' id='gfname" + i + "' readonly/></td><td><input type='text' id='gfage" + i + "'class='form-control gfagecls' readonly/></td> <td><select id='gfrelationship" + i + "' class='gfrelationshipcls form-control'><option value = 'Select' >Select</option ><option value='Father'>Father</option><option value='Mother'>Mother</option><option value='Spouse'>Spouse</option><option value='Child 1'>Child 1</option><option value='Child 2'>Child 2</option></select></td><td><input type='text' id='gfproportion" + i + "'class='form-control gfproportioncls' /></td><td class='aligncenter'><a id='delete" + i + "'  class='buttonname' onclick='delrow(this);'><i class='glyphicon glyphicon-trash'></a></td></tr>";
                $('.gfform').append(data);
                i++;
            }
            else {
                alert("Please select Marital Status");
                return false;
            }
            $(".gfrelationshipcls").on('change', function () {
                switch ($(this).val()) {
                    case 'Father':
                        if ($("#txtfathername").val() != "" && $("#txtfatherage").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtfathername").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtfatherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Father name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Mother':
                        if ($("#txtmothername").val() != "" && $("#txtmotherage").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtmothername").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtmotherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Mother name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Spouse':
                        if ($("#txtspousename").val() != "" && $("#txtspouseage").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtspousename").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtspouseage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Spouse name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 1':
                        if ($("#txtchildname1").val() != "" && $("#txtchildage1").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtchildname1").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtchildage1").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Child 1 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 2':
                        if ($("#txtchildname2").val() != "" && $("#txtchildage2").val() != "") {
                            $(this).closest('tr').find('input.gfnamecls').val($("#txtchildname2").val());
                            $(this).closest('tr').find('input.gfagecls').val($("#txtchildage2").val());
                        }
                        else {
                            $(this).closest('tr').find('input.gfnamecls').val("");
                            $(this).closest('tr').find('input.gfagecls').val("");
                            alert("Please enter Child 2 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Select':
                        break;

                }
            });

        }

        function delrow(btn) {
            var row = btn.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
        function addrowpf() {
            if ($('input[name=maritalstatus]:checked').val() == 'Unmarried') {
                var data = "<tr id='rec" + i + "' class='pftrcls'>";
                data += "<td><input type='text' class='form-control pfnamecls' id='pfname" + i + "' readonly/></td><td><input type='text' id='pfage" + i + "'class='form-control pfagecls' readonly/></td> <td><select id='pfrelationship" + i + "' class='form-control pfrelationshipcls'><option value = 'Select' >Select</option ><option value='Father'>Father</option><option value='Mother'>Mother</option></select></td><td><input type='text' id='pfproportion" + i + "'class='form-control pfproportioncls' /></td><td class='aligncenter'><a id='delete" + i + "'  class='buttonname' onclick='delrowpf(this);'><i class='glyphicon glyphicon-trash'></a></td></tr>";
                $('.pfform').append(data);
                i++;
            }
            else if ($('input[name=maritalstatus]:checked').val() == 'Married') {
                var data = "<tr id='rec" + i + "' class='pftrcls'>";
                data += "<td><input type='text' class='form-control pfnamecls' id='pfname" + i + "' readonly/></td><td><input type='text' id='pfage" + i + "'class='form-control pfagecls' readonly/></td> <td><select id='pfrelationship" + i + "' class='form-control pfrelationshipcls'><option value = 'Select' >Select</option ><option value='Father'>Father</option><option value='Mother'>Mother</option><option value='Spouse'>Spouse</option><option value='Child 1'>Child 1</option><option value='Child 2'>Child 2</option></select></td><td><input type='text' id='pfproportion" + i + "'class='form-control pfproportioncls' /></td><td class='aligncenter'><a id='delete" + i + "'  class='buttonname' onclick='delrowpf(this);'><i class='glyphicon glyphicon-trash'></a></td></tr>";
                $('.pfform').append(data);
                i++;
            }
            else {
                alert("Please select Marital Status");
                return false;
            }
            $(".pfrelationshipcls").on('change', function () {
                switch ($(this).val()) {
                    case 'Father':
                        if ($("#txtfathername").val() != "" && $("#txtfatherage").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtfathername").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtfatherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Father name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Mother':
                        if ($("#txtmothername").val() != "" && $("#txtmotherage").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtmothername").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtmotherage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Mother name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Spouse':
                        if ($("#txtspousename").val() != "" && $("#txtspouseage").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtspousename").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtspouseage").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Spouse name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 1':
                        if ($("#txtchildname1").val() != "" && $("#txtchildage1").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtchildname1").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtchildage1").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Child 1 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Child 2':
                        if ($("#txtchildname2").val() != "" && $("#txtchildage2").val() != "") {
                            $(this).closest('tr').find('input.pfnamecls').val($("#txtchildname2").val());
                            $(this).closest('tr').find('input.pfagecls').val($("#txtchildage2").val());
                        }
                        else {
                            $(this).closest('tr').find('input.pfnamecls').val("");
                            $(this).closest('tr').find('input.pfagecls').val("");
                            alert("Please enter Child 2 name and Age in Mediclaim Details/Dependent details");
                            $(this).val("Select");
                            return false;
                        }
                        break;
                    case 'Select':
                        break;

                }
            });

        }

        function delrowpf(btn) {
            var row = btn.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }

    </script>
</head>
<body>

    <section>
        <div class="container">
            <br>
            <div class="panel panel-default loaderbackgroundcls">
                <div class="panel-heading capsltr">Employee Joining Details</div>
                <div class="panel-body">
                    <h4>Personal Details</h4>
                    <hr>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Employee Code<span class="redstick">*</span></label>
                                <input type="text" id="txtempcode" maxlength="8" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Name<span class="redstick">*</span></label>
                                <input type="text" id="txtempname" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>DOB<span class="redstick">*</span></label>
                                <input type="text" id="txtdob" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Age<span class="redstick">*</span></label>
                                <input type="text" id="txtage" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Sex<span class="redstick">*</span></label>

                                <!-- Default unchecked -->
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="male" name="gender" value="Male">
                                    <label class="custom-control-label radio-labeltxt" for="male">Male</label>
                                </div>

                                <!-- Default checked -->
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="female" name="gender" value="Female">
                                    <label class="custom-control-label radio-labeltxt" for="female">Female</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Marital Status<span class="redstick">*</span></label>
                                <!-- Default unchecked -->
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="married" name="maritalstatus" value="Married">
                                    <label class="custom-control-label radio-labeltxt" for="married">Married</label>
                                </div>

                                <!-- Default checked -->
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="unmarried" name="maritalstatus" value="Unmarried">
                                    <label class="custom-control-label radio-labeltxt" for="unmarried">Unmarried</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Permanent Address</label>
                                <textarea class="form-control clstxtarea" id="txtpermanentaddr" rows="4"></textarea>
                            </div>
                        </div>

                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Postal Address&nbsp;&nbsp;&nbsp;<input type="checkbox" name="samepermanentddress" id="samepermaddress" value="yes"> If same as permanent address</label>
                                <textarea class="form-control clstxtarea" id="txtpostaladdr" rows="4"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Date Of Joining/ Date Of Entry Into Employment<span class="redstick">*</span></label>
                                <input type="text" id="txtpdoj" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Religion<span class="redstick">*</span></label>
                                <input type="text" id="txtreligion" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Designation<span class="redstick">*</span></label>
                                <input type="text" id="txtdesignation" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Department<span class="redstick">*</span></label>
                                <!--<input type="text" id="txtdepartment" class="form-control">-->
                                <select class="form-control" id="drpdepartment">
                                    <option value="Select">Select</option>
                                    <option value="Easybuy">Easybuy</option>
                                    <option value="LOIPL">LOIPL</option>
                                    <option value="Lifestyle">Lifestyle</option>
                                    <option value="Max">Max</option>
                                    <option value="LOIPL">SPAR</option>
                                    <option value="LOIPL">Splash</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Email Id<span class="redstick">*</span></label>
                                <input type="text" id="txtemailid" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Mobile Number<span class="redstick">*</span></label>
                                <input type="text" id="txtmobilenumber" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Emergency Contact Number<span class="redstick">*</span></label>
                                <input type="text" id="txtemgcontentno" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Blood Group</label>
                                <input type="text" id="txtbloodgrp" class="form-control">
                            </div>
                        </div>
                    </div>
                    <h4>Mediclaim Details / Dependent Details</h4>
                    <hr>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Father's Name</label>
                                <input type="text" id="txtfathername" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-2 col-sm-6">
                            <div class="form-group">
                                <label>Age/ DOB</label>
                                <input type="text" id="txtfatherage" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Mother's Name</label>
                                <input type="text" id="txtmothername" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-6 col-xs-12 col-lg-2 col-sm-6">
                            <div class="form-group">
                                <label>Age/ DOB</label>
                                <input type="text" id="txtmotherage" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6 chkunmarried">
                            <div class="form-group">
                                <label>Spouse Name</label>
                                <input type="text" id="txtspousename" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-2 col-sm-6 chkunmarried">
                            <div class="form-group">
                                <label>Age/ DOB</label>
                                <input type="text" id="txtspouseage" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6 chkunmarried">
                            <div class="form-group">
                                <label>Child 1 Name </label>
                                <input type="text" id="txtchildname1" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-2 col-sm-6 chkunmarried">
                            <div class="form-group">
                                <label>Age/ DOB</label>
                                <input type="text" id="txtchildage1" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6 chkunmarried">
                            <div class="form-group">
                                <label>Child 2 Name </label>
                                <input type="text" id="txtchildname2" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-2 col-sm-6 chkunmarried">
                            <div class="form-group">
                                <label>Age</label>
                                <input type="text" id="txtchildage2" class="form-control clsunmarried">
                            </div>
                        </div>
                    </div>
                    <h4>
                        Gratuity Nominee Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label id="labdrpdepart" class="headernominee">

                            <!--<select id="drpdependentdetails" class="form-control"></select>-->
                        </label>
                    </h4>
                    <hr>
                    <div class="row">
                        <table id="gifts_tab" class="table giftscls gfform">
                            <thead>
                                <tr>
                                    <th class="aligncenter">Name</th>
                                    <th class="aligncenter">Age</th>
                                    <th class="aligncenter">Relationship</th>
                                    <th class="aligncenter">Propotion</th>
                                    <th class="aligncenter">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="fathercls gftrcls">
                                    <td><input type="text" id="gfname" class="form-control gfnamecls" readonly></td>
                                    <td><input type="text" id="gfage" class="form-control gfagecls" readonly></td>
                                    <td>
                                        <select id="gfrelationship" class="form-control gfrelationshipcls"></select>
                                    </td>
                                    <td><input type="text" id="gfporportion" class="form-control gfproportioncls"></td>
                                    <td class="aligncenter"><a onclick="addrow();"><i class="glyphicon glyphicon-plus"></i> Add Row</a></td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h4>PF FORM</h4>
                    <hr>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Previous Company Name</label>
                                <input type="text" id="txtpfcompanyname" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>UAN</label>
                                <input type="text" id="txtpfUAN" class="form-control" maxlength="12">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>PF Account Number</label>
                                <input type="text" id="txtpfaccountname" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>DOJ</label>
                                <input type="text" id="txtpfdoj" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>DOE</label>
                                <input type="text" id="txtpfdoe" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Aadhar Number<span class="redstick">*</span></label>
                                <input type="text" id="txtpfaadharnumber" class="form-control" maxlength="12">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>PAN Number<span class="redstick">*</span></label>
                                <input type="text" id="txtpfpanno" class="form-control" maxlength="10" style="text-transform: uppercase">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Bank Name</label>
                                <input type="text" id="txtpfbankname" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>Bank Account Number</label>
                                <input type="text" id="txtpfbankaccount" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xs-12 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label>IFSC Code</label>
                                <input type="text" id="txtpfifsccode" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <h4>PF Nomination&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label id="labpfnomiation" class="headernominee"><input type="checkbox" name="samegratuitynominee" id="samegratuitynominees" value="yes"> If same as gratuity nomination to be taken</label></h4>
                <hr>
                <div class="row">
                    <table id="gifts_tab" class="table giftscls pfform">
                        <thead>
                            <tr>
                                <th class="aligncenter">Name</th>
                                <th class="aligncenter">Age</th>
                                <th class="aligncenter">Relationship</th>
                                <th class="aligncenter">Propotion</th>
                                <th class="aligncenter">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="pftrcls">
                                <td><input type="text" id="pfname" class="form-control pfnamecls" readonly></td>
                                <td><input type="text" id="pfage" class="form-control pfagecls" readonly></td>
                                <td>
                                    <select id="pfrelationship" class="form-control pfrelationshipcls"></select>
                                </td>
                                <td><input type="text" id="pfproportion" class="form-control pfproportioncls"></td>
                                <td class="aligncenter"><a onclick="addrowpf();"><i class="glyphicon glyphicon-plus"></i> Add Row</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="row">
                    <center>
                        <input type="button" class="btn btn-success" id="btnsubmit" value="Submit" onclick="Addemployeedetails()">&nbsp;&nbsp;&nbsp;
                        <input type="button" class="btn btn-clear" id="btnclear" value="Clear" onclick="clearall()">
                    </center>
                </div>
                <br>
            </div>
        </div>     
        <div id="loader">
            <img src='/sites/connect/Style Library/Homepage/images/Loader.gif' width="70" height="70" />
        </div>
    </section>
</body>
</html>



CSS:

Employee Joining Form CSS:


<style>
    .panel-default > .panel-heading {
        background-color: #e8e6e6;
        border-color: #e8e6e6;
    }

    .capsltr {
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold;
        color: #535353;
    }

    label
    {
        color: #34343e;
     
    }
    h4
    {
color: #0072C6 !important;
    }
    /*radio label*/
    .radio-labeltxt 
{
  margin-bottom: -4px !important;
  font-weight: 500 !important;
}

    .redstick
    {
    color: red;
    font-size: 15px;
    }
    input[type=checkbox]
{
  margin-bottom: 4px !important;
}


    .btn-clear {
        color: #fff !important;
        background-color: #555353 !important;
        border-color: #555353 !important;
        padding: 6px 24px;
    }

    .btn-clear:hover {
       color: #fff !important;
       background-color: #413e3e !important;
       border-color: #413e3e !important;
     }

    .btn-success {
        color: #fff !important;
        background-color: #5cb85c !important;
        border-color: #4cae4c !important;
    }
    .btn-success:hover {
            color: #fff !important;
            background-color: #449d44 !important;
            border-color: #398439 !important;
        }
    /*loader css*/
#loader
{
display:none;
width:69px;
height:89px;
position:fixed;
left:50%;
top:50%;
bottom:50% }

</style>

Gratuity Form CSS


/*table design*/
.table-responsive {
    min-height: .01%;
    overflow-x: auto;
    display: block;
    width: 100%;
}
.giftscls tr th
{
background:#354a5f;
color:#fff;
}
.giftscls thead
{
border: 1px solid #000000;
}
.giftscls tbody
{
    border: 1px solid #000000;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
border-top:0px;
border-right: 1px solid #000000;
}
.giftscls
{
font-size: 12px;
}
.dataTables_filter label input
{
font-weight:100;
}
.applycls a:visited 
{
    color: #663399 !important;
    text-decoration: none !important;
}
#pageTitle
{
display:none !important;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #000000;
}
.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 1px solid #000000 !important;
}