<style> form#admission-register ul { background-color: transparent !important; border: none !important; border-bottom: 2px solid #b7b3b3 !important; list-style: none; display: flex; justify-content: space-around; } form#admission-register ul li { flex-basis: 25%; margin: 0 !important; display: flex; align-items: center; justify-content: center; } form label.error, #secNameerr { color: red; font-size: 13px; margin-bottom: 0; } input[type="date"]::-webkit-calendar-picker-indicator { right: 27px; } .register-radio label { font-size: 14px; } .register-row { margin-bottom: 20px; } form#admission-register .ui-widget-header .ui-state-active { background-color: transparent !important; color: #032da1 !important; } form#admission-register .ui-widget-header .ui-state-active a { color: #032da1; } form#admission-register ul li a { background: none; color: #222; padding: 10px 15px; cursor: pointer; font-weight: 500; } form#admission-register ul li.ui-state-active:after { position: absolute; content: ""; left: 0; background: #032da1; right: 0; height: 4px; bottom: -1px; width: 96%; margin: auto; } .has-float-label .form-control:placeholder-shown:not(:focus)+* { opacity: 0.5; top: 1em; } .has-float-label .nepal-date-student:placeholder-shown:not(:focus)+* { opacity: 0.5; top: 0.4em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Poppins; font-size: 12px; } .register-radio { width: 24%; } .form-control { padding: 0.5rem 0.75rem; } .upload-doc label.upload-btn { width: 100%; } .passwrd-icon { right: 25px; } </style> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <div class="adm-cover"> <header class="login-header"> <div class="login-wrap"> <div class="logo-wrap"> <a href="<?php echo base_url() . $this->uri->segment(1); ?>"><img src="<?php echo base_url(); ?>common_assets/<?php echo $school_info['color_logo'] ?>"> </a> </div> </div> <div class="header-menu-wrap"> <div class="login-mob-menu"><i class="fas fa-bars"></i></div> <ul class="mob-menu"> <li><a href="">About Us</a></li> <li><a href="">Contact Us</a></li> <li><a href="admission-process.html"><button class="join-class-btn">Admission Process ></button></a></li> </ul> </div> </header> <div class="admission-wrap"> <div class="admission-cover"> <div class="admission-head"> <h3 class="common-heading">Application for Admission</h3> </div> <?php if ($this->session->flashdata('success')) { ?> <div class="alert alert-success alert-dismissible fade show" role="alert"> <p><?php echo $this->session->flashdata('success') ?></p> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php } ?> <?php if ($this->session->flashdata('failed')) { ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <p><?php echo $this->session->flashdata('failed') ?></p> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php } ?> <form id="admission-register" action="<?php echo base_url(); ?>Student/addedit_apllication" method="post" enctype="multipart/form-data"> <div class="tab-head" id="formtabs"> <ul> <li class="tab-link" data-ref="enabled"><a href="#tab-1">Student Details</a> </li> <li class="tab-link" data-ref="disabled"><a href="#tab-2">Guardian details</a></li> <li class="tab-link" data-ref="disabled"><a href="#tab-3">Documents</a> </li> <li class="tab-link" data-ref="disabled"><a href="#tab-4">Other Details</a> </li> </ul> <div class="tab-content-wrap"> <div id="tab-1" class="tab-content current"> <div class="row"> <h4 class="adm-heading px-3">General Details</h4> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="sfname" name="sfname" class="form-control" placeholder='Enter First Name' pattern="[a-zA-Z]+"> <span>First Name <b class="text-danger">*</b></span> </label> <label id="sfname-error" class="error" for="sfname"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="ssname" name="ssname" class="form-control" placeholder='Enter Last Name' pattern="[a-zA-Z]+"> <span>Last Name <b class="text-danger">*</b></span> </label> <label id="ssname-error" class="error" for="ssname"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="email" id="semail" name="semail" class="form-control" placeholder='Enter email address'> <span>Email Address <b class="text-danger">*</b></span> </label> <label id="semail-error" class="error" for="semail"></label> </div> <div class="w-100 mt-3"></div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" name="sdob" class="form-control nepal-date-student sdob" id="sdob" placeholder="DOB (YYYY-mm-dd)"> <i class="fas fa-calendar-alt cal-icon"></i> <span>Date of Birth <b class="text-danger">*</b></span> </label> <label id="sdob-error" class="error" for="sdob"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="scontact" name="scontact" class="form-control" placeholder='Enter Contact Number' pattern="[0-9]+"> <span>Contact Number</span> </label> <label id="scontact-error" class="error" for="scontact"></label> </div> <div class="col"> <div class="register-radio">Gender:</div> <div class="register-radio"> <label for="Male"><input type="radio" id="Male" name="sgender" value="Male" checked> Male </label> </div> <div class="register-radio"> <label for="Female"><input type="radio" id="Female" name="sgender" value="Female"> Female</label> </div> <div class="register-radio"> <label for="Other"><input type="radio" id="Other" name="sgender" value="Other"> Other</label> </div> <label id="sgender-error" class="error" for="sgender"></label> </div> <div class="w-100 mt-3"></div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="sbirth-certificate" name="sbirth-certificate" class="form-control" placeholder='Enter Birth Certificate Number'> <span>Birth Certificate</span> </label> <label id="sbirth-certificate-error" class="error" for="sbirth-certificate"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="scaste" name="scaste" class="form-control" placeholder='Enter Caste'> <span>Caste</span> </label> <label id="scaste-error" class="error" for="scaste"></label> </div> <div class="col"> <label class="has-float-label"> <select name="sreligion" id="sreligion" class="form-control custom-select selectpicker" data-live-search="true"> <option value="">Select Religion</option> <option value="Hinduism">Hinduism </option> <option value="Islam">Islam</option> <option value="Buddhism">Buddhism</option> <option value="Christianity">Christianity</option> <option value="Other">Other</option> </select> <span>Religion</span> </label> </div> <div class="w-100 mt-3"></div> <div class="col-md-4"> <label class="has-float-label mb-0"> <input type="text" id="sprevious-school" name="sprevious-school" class="form-control" placeholder='Enter previous school name'> <span>Previous School</span> </label> <label id="sprevious-school-error" class="error" for="sprevious-school"></label> </div> <div class="w-100 mt-3"></div> <h4 class="adm-heading px-3">Address Details</h4> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="saddress" name="saddress" class="form-control" placeholder='Enter Address' required> <span>Address <b style="color:red;"> * </b></span> </label> <label id="saddress-error" class="error" for="saddress"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <select name="sprovince" id="sprovince" class="form-control custom-select selectpicker" required> <?php foreach ($provinces as $province) { ?> <option value="<?= $province['name'] ?>" <?= $province['id'] == 7 ? 'selected' : '' ?>> <?= $province['name'] ?> </option> <?php } ?> </select> <span>Province <b style="color:red;"> * </b></span> </label> </div> <div class="col"> <label class="has-float-label"> <select name="scountry" id="scountry" class="form-control custom-select selectpicker" data-live-search="true"> <option value="">Select Country</option> <option value="Nepal" selected>Nepal </option> <option value="Other">Other</option> </select> <span>Country <span style="color:red;"> * </span></span> </label> </div> </div> <div class="register-btn mt-3"> <a id="cont_1" type="button" class="text-white join-class-btn" href="#tab-2">Continue</a> </div> </div> </div> <div id="tab-2" class="tab-content tab_2"> <div class="row"> <h4 class="adm-heading px-3">Father's Details</h4> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="sfathername" name="sfathername" class="form-control" placeholder='Enter Father Name' pattern="[a-zA-Z]+"> <span>Full Name</span> </label> <label id="sfathername-error" class="error" for="sfathername"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="fcitizenship-number" name="fcitizenship-number" class="form-control" placeholder='Enter citizenship number'> <span>Citizendhip Number</span> </label> <label id="fcitizenship-number-error" class="error" for="fcitizenship-number"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="fcontact" name="fcontact" class="form-control" placeholder='Enter Contact Number'> <span>Contact Number</span> </label> <label id="fcontact-error" class="error" for="fcontact"></label> </div> <div class="w-100 mt-3"></div> <h4 class="adm-heading px-3">Mother's Details</h4> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="mfathername" name="mfathername" class="form-control" placeholder='Enter Mother Name' pattern="[a-zA-Z]+"> <span>Full Name</span> </label> <label id="mfathername-error" class="error" for="mfathername"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="mcitizenship-number" name="mcitizenship-number" class="form-control" placeholder='Enter citizenship number'> <span>Citizendhip Number</span> </label> <label id="mcitizenship-number-error" class="error" for="mcitizenship-number"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="mcontact" name="mcontact" class="form-control" placeholder='Enter Contact Number'> <span>Contact Number</span> </label> <label id="fcontact-error" class="error" for="mcontact"></label> </div> <div class="w-100 mt-3"></div> <h4 class="adm-heading px-3">Local Guardian (if any)</h4> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="lgfullname" name="lgfullname" class="form-control" placeholder='Enter Local Guardian' pattern="[a-zA-Z]+"> <span>Full Name</span> </label> <label id="lgfullname-error" class="error" for="lgfullname"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="lgaddress" name="lgaddress" class="form-control" placeholder='Enter address'> <span>Address</span> </label> <label id="lgaddress-error" class="error" for="lgaddress"></label> </div> <div class="col"> <label class="has-float-label mb-0"> <input type="text" id="lgcontact" name="lgcontact" class="form-control" placeholder='Enter Contact Number'> <span>Contact Number</span> </label> <label id="lgcontact-error" class="error" for="lgcontact"></label> </div> </div> <div class="register-btn mt-4"> <button class="join-class-btn" type="button" id="previous_1">Previous</button> <button class="join-class-btn" type="button" id="cont_2">Continue</button> </div> </div> <div id="tab-3" class="tab-content tab_3"> <h4 class="adm-heading">Upload required document</h4> <div class="upload-doc"> <label>Passport size photo</label> <!-- <span id="uploaded-file"> </span> --> <div class="upload-doc-btn-wrap"> <input type="file" name="photo" id="photo" name="No file uploaded" /> <label for="photo" class="upload-btn" id="uploadBtn1">Upload</label> <label for="photo" class="upload-btn re-upload-btn" id="uploadBtn2">Re-Upload</label> </div> </div> <div class="upload-doc"> <label>School certificate</label> <!-- <span id="uploaded-file"> </span> --> <div class="upload-doc-btn-wrap"> <input type="file" name="school" id="school" name="No file uploaded" /> <label for="school" class="upload-btn" id="uploadBtn3">Upload</label> <label for="school" class="upload-btn re-upload-btn" id="uploadBtn4">Re-Upload</label> </div> </div> <div class="upload-doc"> <label>Exam Results</label> <!-- <span id="uploaded-file"> </span> --> <div class="upload-doc-btn-wrap"> <input type="file" name="exam" id="exam" name="No file uploaded" /> <label for="exam" class="upload-btn" id="uploadBtn5">Upload</label> <label for="exam" class="upload-btn re-upload-btn" id="uploadBtn6">Re-Upload</label> </div> </div> <div class="upload-doc"> <label>Medical Certificate</label> <!-- <span id="uploaded-file"> </span> --> <div class="upload-doc-btn-wrap"> <input type="file" name="medical" id="medical" name="No file uploaded" /> <label for="medical" class="upload-btn" id="uploadBtn7">Upload</label> <label for="medical" class="upload-btn re-upload-btn" id="uploadBtn8">Re-Upload</label> </div> </div> <div class="register-btn"> <button class="join-class-btn" type="button" id="previous_2">Previous</button> <button class="join-class-btn" type="button" id="cont_3">Continue</button> </div> </div> <div id="tab-4" class="tab-content"> <div class="row"> <h4 class="adm-heading px-3">General Details</h4> <div class="col-md-4"> <label class="has-float-label mb-0"> <select name="scourse" class="form-control custom-select selectpicker scourse" id="scourse"> <option value="">Select Class</option> <?php foreach ($courses as $c) { ?> <option value="<?= $c['id'] ?>"><?= $c['course_name'] ?></option> <?php } ?> </select> <span>Class <b class="text-danger">*</b></span> </label> <label id="scourse-error" class="error" for="scourse"></label> </div> <div class="col-md-4"> <label class="has-float-label mb-0"> <select name="sbatch" class="form-control custom-select selectpicker sbatch" id="sbatch"> <?php foreach ($batch as $c) { ?> <option value="<?= $c['id'] ?>" <?= $c['id'] == $school_info['batch_id'] ? 'selected' : '' ?>><?= $c['b_name'] ?></option> <?php } ?> </select> <span>Batch <b class="text-danger">*</b></span> </label> <label id="sbatch-error" class="error" for="sbatch"></label> </div> <div class="w-100 mt-4"></div> <h4 class="adm-heading px-3">Credentials</h4> <div class="col-md-4"> <label class="has-float-label mb-0"> <input type="password" name="spaswd" class="spaswd form-control" placeholder="Password" id="password1"> <span>Password <b class="text-danger">*</b></span> </label> <span class="passwrd-icon icon-y" id="p_icon1"> <i class="far fa-eye"></i> </span> </div> <div class="col-md-4"> <label class="has-float-label mb-0"> <input type="password" name="spaswdre" class="spaswdre form-control" id="spaswdre" placeholder="Re-enter Password"> <span>Confirmation Password <b class="text-danger">*</b></span> </label> <span class="passwrd-icon icon-y" id="p_icon2"> <i class="far fa-eye"></i> </span> <label id="spaswdre-error" class="error" for="spaswdre"></label> </div> </div> <div class="register-btn mt-4"> <button class="join-class-btn" type="button" id="previous_3">Previous</button> <button class="join-class-btn" data-toggle="modal" data-target="#paymentDone">Continue</button> </div> </div> </div> </div> </form> </div> </div> <!-- Javascript --> <script> $("#formtabs").tabs({ active: 0, beforeActivate: function(event, ui) { let NewTabIndex = ui.newTab.index(); let CurrentTabIndex = ui.oldTab.index(); if (NewTabIndex > (CurrentTabIndex + 1)) { console.log(ui.newTab.data('ref')); if (ui.newTab.data('ref') == 'enabled') { return true; } return false; } if (NewTabIndex < CurrentTabIndex) { return true; } if ($('#admission-register').valid()) { ui.newTab.attr("data-ref", "enabled"); return true; } return false; } }); function loadTab(id) { console.log('isdss asdasds asdasd'); $("#formtabs").tabs({ active: id }) } // First Tab Change $("#cont_1").click(function() { $("#formtabs").tabs("option", "active", 1); }); $("#previous_1").click(function() { $("#formtabs").tabs("option", "active", 0); }); // First Tab Change // Second Tab Change $("#cont_2").click(function() { $("#formtabs").tabs("option", "active", 2); }); $("#previous_2").click(function() { $("#formtabs").tabs("option", "active", 1); }); // Second Tab Change // Third Tab Change $("#cont_3").click(function() { $("#formtabs").tabs("option", "active", 3); }); $("#previous_3").click(function() { $("#formtabs").tabs("option", "active", 2); }); // Third Tab Change </script> <script> jQuery.validator.addMethod("fullnameregex", function(value, element) { return this.optional(element) || /^[a-zA-Z ]{3,40}$/.test(value); }, 'Please enter alpha characters only '); jQuery.validator.addMethod("passwordregex", function(value, element) { return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$#!%*?&])[A-Za-z\d@$!%*#?&]{6,16}$/.test(value); }, 'Your password must be atleast 6 characters long, which inculdes one upper case, one numerical value and one special character.'); jQuery.validator.addMethod("emailregex", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,8}$/.test(value); }, 'Email Address is invalid: Please enter a valid email address.'); jQuery.validator.addMethod("phonenumberregex", function(value, element) { return this.optional(element) || /^[0-9]{8,14}$/.test(value); }, 'Please enter a 8-14 digits vaild phone number.'); jQuery.validator.addMethod("zipregex", function(value, element) { return this.optional(element) || /^[0-9]{3,8}$/.test(value); }, 'Please enter a 3-8 digits numbers: digits only allowed'); jQuery.validator.addMethod("genral_regex", function(value, element) { return this.optional(element) || /^[a-zA-Z -#]{1,50}$/.test(value); }, 'Please enter alpha characters only'); var v = $("#admission-register").validate({ ignore: ':hidden', rules: { sfname: { required: true, minlength: 3, maxlength: 40, fullnameregex: true, }, ssname: { required: true, minlength: 1, genral_regex: true }, semail: { required: true, email: true, emailregex: true }, spaswd: { required: true, minlength: 6, maxlength: 12, passwordregex: true }, spaswdre: { required: true, equalTo: '[name="spaswd"]' }, scontact: { minlength: 8, maxlength: 14, phonenumberregex: true }, sdob: "required", sgender: { required: true }, scourse: { required: true }, sbatch: { required: true }, semfname: { required: true, genral_regex: true }, semlname: { required: true, minlength: 1, genral_regex: true }, semphone: { required: true, minlength: 10, maxlength: 14, phonenumberregex: true }, scountry: { required: true, genral_regex: true }, sstate: { required: true, genral_regex: true }, saddress1: { required: true }, szipcode: { required: true, zipregex: true }, amount: { required: true } }, messages: { sfname: { required: "Enter first name", equalTo: "Please enter the same email address again.", }, ssname: { required: "Enter last Email", equalTo: "Please enter the same email address again.", }, semail: { required: "Enter email address", equalTo: "Please enter the same email address again.", }, sdob: { required: "Enter date of birth" }, spaswd: { required: "Please enter password" }, spaswdre: { equalTo: "Please enter the same password again.", }, semphone: { minlength: "Please Enter a 8 digits valid phone Number", maxlength: "Please Enter a 14 digits valid phone Number", }, scontact: { minlength: "Please Enter a 8 digits valid phone Number", maxlength: "Please Enter a 14 digits valid phone Number", }, scourse: { required: "Select a class you want to enroll" }, }, submitHandler: function(form) { form.submit(); }, highlight: function(element, errorClass) { window.scrollTo(0, 0); }, unhighlight: function(element, errorClass) { }, }); </script> <script> $("#p_icon1").click(function() { $("#p_icon1").toggleClass("icon-y"); var input = $("#password1"); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); $("#p_icon2").click(function() { $("#p_icon2").toggleClass("icon-y"); var input = $("#spaswdre"); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); $('#sbatch').change(function() { var sbatch = $(this).val(); var scourse = $('#scourse option:selected').val(); // alert(scourse); var div_data = ''; var total_fee = 0; $('#fee-section').html(""); $('#total-fee').text(); $('#textbox-totalfee').val(''); if (scourse != '' && scourse != 0) { $('#course_error').addClass("d-none"); $.ajax({ url: "<?php echo base_url(); ?>Student/get_applicationfee", method: "post", data: { batch_id: sbatch, course_id: scourse }, dataType: "json", success: function(data) { console.log(data); if (data != 0) { total_fee = (data.amount != '') ? data.amount : 0; div_data += '<div class="payment-row"><label>Application Fee:</label><span>' + data.amount + '</span></div>'; $('#total-fee').text(total_fee); $('#textbox-totalfee').val(total_fee); } else { div_data += '<div class="payment-row"><label class="text-danger"> Application Fee Not Found </label></div>'; $('#total-fee').text(total_fee); $('#textbox-totalfee').val(''); } $('#fee-section').append(div_data); } }); } else { $('#course_error').removeClass("d-none"); } }); </script>