<style> .register-row { position: relative; display: flex; justify-content: space-between; } .passwrd-icon1 { position: absolute; top: 5px !important; right: 8px; cursor: pointer; } .upload-doc-btn-wrap { position: relative; } .error { color: red; padding-top: 5px; font-size: 12px; } .col-md-6.col-height { height: 50px !important; } </style> <div class="wraper responsive-width"> <main class="container" id="main"> <!----admin template section----> <div class="admin_tempblock"> <div class="admin_tempsec"> <div class="admin_sec"> <form id="addEditBatchForm" method="post" action="<?php echo base_url(); ?>admin/AddnewApplication" enctype="multipart/form-data"> <div class="col-md-8 px-0"> <div class="register-form"> <div class="row"> <div class="col-md-12"> <div class="subject_lhead"><?php echo $title; ?></div> </div> </div> <br> <div class="card"> <div class="card-body"> <h5 class="card-title">Register</h5> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-6"> <div class="register-row"> <input type="text" name="sfname" class="sfname form-control" id="sfname" placeholder="First name" /> </div> <label id="sfname-error" class="error" for="sfname"></label> </div> <div class="col-md-6"> <div class="register-row"> <input type="text" name="ssname" class="ssname form-control" id="ssname" placeholder="Second name" /> </div> <label id="ssname-error" class="error" for="ssname"></label> </div> </div> </div> <div class="col-md-12 pt-4"> <div class="row"> <div class="col-md-6"> <div class="register-row"> <input type="text" name="semail" id="semail" class="semail form-control" placeholder="Email Address"> </div> <label id="semail-error" class="error" for="semail"></label> </div> <div class="col-md-6"> <div class="register-row"> <input type="text" name="semailre" class="semailre form-control" id="semailre" placeholder="Re-Enter your Email address"> </div> <label id="semailre-error" class="error" for="semailre"></label> </div> </div> </div> <div class="col-md-12 pt-4"> <div class="row"> <div class="col-md-6"> <div class="register-row"> <input type="password" name="spaswd" class="spaswd form-control" placeholder="Password" id="password3"> <span class="passwrd-icon1 icon-y" id="p_icon3"> <i class="far fa-eye"></i> </span> </div> <label id="password3-error" class="error" for="password3"></label> </div> <div class="col-md-6"> <div class="register-row"> <input type="password" name="spaswdre" class="spaswdre form-control" id="password4" placeholder="Re-enter Password"> <span class="passwrd-icon1 icon-y" id="p_icon4"> <i class="far fa-eye"></i> </span> </div> <label id="password4-error" class="error" for="password4"></label> </div> </div> </div> <div class="col-md-12 pt-4"> <div class="row"> <div class="col-md-6"> <div class="register-row"> <input type="text" name="scontact" class="scontact form-control" id="scontact" placeholder="Contact number"> </div> <label id="scontact-error" class="error" for="scontact"></label> </div> <div class="col-md-6"> <div class="register-row"> <div class="po-calendar"> <input type="text" name="sdob" id='sdob' class="nepal-date sdob form-control" placeholder="dd"> <i class="fas fa-calendar-alt cal-icon"></i> </div> <!-- <input type="date" name="sdob" class="sdob form-control" id="sdob" placeholder="dd"> --> </div> <label id="sdob-error" class="error" for="sdob"></label> </div> <div class="col-md-6"> <div class="register-row"> <div class="register-radio"> <label for="Male"><input type="radio" id="Male" name="sgender" value="Male"> 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> </div> <label id="sgender-error" class="error" for="sgender"></label> <!-- sibling start --> <!-- <div class="register-radio"> <label for="sibling"><input type="checkbox" id="sibling" name="sibling" value="yes"> Has sibling? </label> </div> <div id="sibling_outer_div" style="display: none" class="mt-3"> <label class="" for="sibling_id">Sibling Id <span style="color:red">*</span></label> <input type="text" name="sibling_id" id="sibling_id" class="form-control" placeholder="Sibling Id"> </div> <label id="sibling_id_err" class="error"></label> --> <!-- Dont Delete Below Code --> <!-- <input type="hidden" name="sibling_parent_id" id="sibling_parent"> --> <!-- Dont Delete Below Code --> <!-- sibling end --> </div> </div> </div> </div> </div> </div> <div class="card my-3"> <div class="card-body"> <h5 class="card-title">Additional details</h5> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-12 my-2"> <h6>Course Details</h6> </div> <div class="col-md-6 col-height"> <div class="register-row"> <select name="sbatch" class="sbatch form-control" id="sbatch"> <option value="">Select Batch</option> <?php foreach ($batch as $c) { ?> <option value="<?= $c['id'] ?>"><?= $c['b_name'] ?></option> <?php } ?> </select> </div> <label id="sbatch-error" class="error" for="sbatch"></label> <p id="batch_error" class="d-none text-danger" style="font-size:14px">Please Select Batch </p> </div> <div class="col-md-6 col-height"> <div class="register-row"> <select name="scourse" class="scourse form-control" id="scourse"> <option value="">Select Course</option> <!-- <?php //foreach ($courses as $c) { ?> <option value="<?php //echo $c['id'] ?>"><?php //echo $c['course_name'] ?></option> <?php //} ?> --> </select> </div> <label id="scourse-error" class="error" for="scourse"></label> <p id="course_error" class="d-none text-danger" style="font-size:14px">Please Select Course </p> <p id="course_error_msg" class="text-danger" style="font-size:14px"> </p> </div> <div class="col-md-6 col-height mt-3"> <div class="register-row"> <select name="s_section" class="s_section form-control" id="s_section"> <option value=''> Select Section </option> </select> </div> <label id="s_section-error" class="error" for="s_section"></label> </div> </div> </div> <div class="col-md-12 pt-4"> <div class="row"> <div class="col-md-12 my-2"> <h6>Emergency Contact</h6> </div> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="semfname" class="semfname form-control" id="semfname" placeholder="Enter name"> </div> <label id="semfname-error" class="error" for="semfname"></label> </div> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="semlname" class="semlname form-control" id="semlname" placeholder="Last Name"> </div> <label id="semlname-error" class="error" for="semlname"></label> </div> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="semphone" class="semphone form-control" id="semphone" placeholder="Phone Number"> </div> <label id="semphone-error" class="error" for="semphone"></label> </div> </div> </div> <div class="col-md-12 pt-4"> <div class="row"> <div class="col-md-12 my-2"> <h6>Address</h6> </div> <div class="col-md-6 col-height"> <div class="register-row"> <select name="scountry" class="scountry form-control" id="scountry"> <option value="">Country</option> <option value="Nepal" selected>Nepal</option> <option value="India">India</option> </select> </div> <label id="scountry-error" class="error" for="scountry"></label> </div> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="sstate" class="sstate form-control" id="sstate" placeholder="Provinces/state"> </div> <label id="sstate-error" class="error" for="sstate"></label> </div> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="saddress1" class="saddress1 form-control" id="saddress1" placeholder="Address 1"> </div> <label id="saddress1-error" class="error" for="saddress1"></label> </div> </div> </div> <div class="col-md-12 pt-4"> <div class="row"> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="saddress2" class="saddress2 form-control" id="saddress2" placeholder="Address 2"> </div> <label id="saddress2-error" class="error" for="saddress2"></label> </div> <div class="col-md-6 col-height"> <div class="register-row"> <input type="text" name="szipcode" class="szipcode form-control" id="szipcode" placeholder="PMB / Zip code"> </div> <label id="szipcode-error" class="error" for="szipcode"></label> </div> </div> </div> </div> </div> </div> <div class="card my-3"> <div class="card-body"> <h5 class="card-title">Documents</h5> <label class="text-danger "> ** Accepted Only JPG and PNG</label> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-6"> <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">Upload</label> </div> </div> </div> <div class="col-md-6"> <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" accept=".png,.jpg*" /> <label for="school" class="upload-btn" id="uploadBtn3">Upload</label> <label for="school" class="upload-btn re-upload-btn" id="uploadBtn4">Upload</label> </div> </div> </div> <div class="col-md-6"> <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" accept=".png,.jpg*" /> <label for="exam" class="upload-btn" id="uploadBtn5">Upload</label> <label for="exam" class="upload-btn re-upload-btn" id="uploadBtn6">Upload</label> </div> </div> </div> <div class="col-md-6"> <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" accept=".png,.jpg*" /> <label for="medical" class="upload-btn" id="uploadBtn7">Upload</label> <label for="medical" class="upload-btn re-upload-btn" id="uploadBtn8">Upload</label> </div> </div> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Application fee</h5> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-4"> <div class="register-row"> <input type="text" name="totalfee" class="totalfee form-control" id="totalfee" readonly placeholder="Application Fee" /> </div> <label id="totalfee-error" class="error" for="totalfee"></label> <div id="fee-section"></div> </div> <div class="col-md-4"> <div class="register-row"> <!-- <input type="text" name="payment_method" class="payment_method form-control" id="payment_method" placeholder="Payment Method" /> --> <select name="payment_method" class="payment_method form-control" id="payment_method"> <option value="">-- Select --</option> <option value="cash">Cash</option> <option value="bank-transfer">Bank Transfer</option> </select> </div> <label id="payment_method-error" class="error" for="payment_method"></label> </div> <div class="col-md-4 "> <div class="register-row description_section d-none"> <input type="text" name="description" id="description" class="description form-control" placeholder="DD No."> </div> <div class="register-row discount_fine_section d-none"> <div class="register-row"> <select name="dicount_scholar" class="dicount_scholar form-control" onchange="add_dicount_scholar(this)" id="dicount_scholar"> <option value="" selected>None</option> <option value="discount">Discount</option> <option value="scholarship">Scholarship</option> </select> </div> </div> <div id="discount_scholarship_div" class="pt-2"> </div> </div> </div> </div> </div> </div> </div> <div class=" my-2"> <div class="card-body"> <div class="row text-center justify-content-center"> <div class="col-md-8 align-self-center "> <div class="register-btn"> <button class="btn btn-success btn-sm pr-5 pl-5" type="submit" id="">Add</button> <a href="<?= base_url(); ?>admin/get_application" class="btn btn-sm pr-5 pl-5" style="background-color:#032da1;color:white;">Back</a> </div> </div> </div> </div> </div> </div> </div> </form> </div> </div> </div> <!----admin template section end----> </main> <!--End right-top side--> </div> <script> $("#p_icon3").click(function() { $(this).toggleClass("icon-y"); var input = $("#password3"); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); $("#p_icon4").click(function() { $(this).toggleClass("icon-y"); var input = $("#password4"); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); $('#sbatch').change(function() { var sbatch = $(this).val(); $('#totalfee').val(''); var divData = ''; if (sbatch != '' && sbatch != 0) { $('#batch_error').addClass("d-none"); $.ajax({ url: "<?php echo base_url(); ?>Admin/get_batch_course", method: "post", data: { batch_id: sbatch, }, dataType: "json", success: function(response) { divData += "<option value=''> Select Course </option>"; if (response != '') { $.each(response, function(i, coursedata) { divData += "<option value='" + coursedata.id + "'>" + coursedata.course_name + "</option>"; }); } else { divData += "<option value=''> -- No course's Found --</option>"; // $('#course_error_msg').text("Please create application fee for particular course"); } $('#scourse').empty().append(divData); } }); } else { $('#batch_error').removeClass("d-none"); } }); $('#scourse').change(function() { var course = $('#scourse option:selected').val(); var batch = $('#sbatch option:selected').val(); var divData = ''; var div_data = ''; var total_fee = ''; $('#fee-section').html(""); $('#total-fee').text(); if (course != '' && course != 0) { $('#course_error').addClass("d-none"); $.ajax({ url: "<?php echo base_url(); ?>Admin/get_sectionbycourse", method: "post", data: { course_id: course, batch_id: batch }, dataType: "json", success: function(response) { // Application Fee code and Start from here if (response.application_fee != 0) { var ParseData = JSON.parse(response.application_fee); total_fee = (ParseData.amount != '') ? ParseData.amount : ''; // alert(total_fee); $('#totalfee').val(total_fee); } else { div_data += '<div class="payment-row"><p class="text-danger" style="font-size:14px"> Applicatfon Fee Not Found </p></div>'; $('#totalfee').val(total_fee); } $('#fee-section').append(div_data); // Application Fee code and End from here // section options code and start from here divData += "<option value=''> Select Section </option>"; if (response.sections != '') { $.each(response.sections, function(i, sectiondata) { divData += "<option value='" + sectiondata.section_id + "'>" + sectiondata.section_name + "</option>"; }); } // $('#course_error_msg').text(); else { divData += "<option value=''> -- No Section's Found --</option>"; } $('#s_section').empty().append(divData); // section options code here End from here } }); } else { $('#course_error').removeClass("d-none"); } }); // $('#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(); // 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) { // if (data != 0) { // total_fee = (data.amount != '') ? data.amount : 0; // $('#totalfee').val(total_fee); // } else { // div_data += '<div class="payment-row"><p class="text-danger" style="font-size:14px"> Applicatfon Fee Not Found </p></div>'; // $('#totalfee').val(total_fee); // } // $('#fee-section').append(div_data); // } // }); // } else { // $('#course_error').removeClass("d-none"); // } // }); // $('#scourse').change(function(){ // var course = $('#scourse option:selected').val(); // var divData=''; // if (course != '' && course != 0) { // $('#course_error').addClass("d-none"); // $.ajax({ // url: "<?php //echo base_url(); ?>Admin/get_sectionbycourse", // method: "post", // data: { // course_id: course // }, // dataType: "json", // success: function(response) { // divData += "<option value=''> Select Section </option>"; // if(response != ''){ // $.each(response, function(i, sectiondata) { // divData += "<option value='"+sectiondata.section_id+"'>"+sectiondata.section_name+"</option>"; // }); // } // else { // divData += "<option value=''> -- No Section's Found --</option>"; // } // $('#s_section').empty().append(divData); // } // }); // } // else { // $('#course_error').removeClass("d-none"); // } // }); </script> <script> var description_section_validation = ''; let discount_validation = ''; $('#payment_method').change(function() { var payment = $('#payment_method :selected').val(); if (payment == 'bank-transfer') { $('#discount_scholarship_div').empty(); $('.description_section').removeClass('d-none'); description_section_validation = 'required'; } else { $('.description_section').addClass('d-none'); description_section_validation = ''; } if (payment == 'cash') { $('.discount_fine_section').removeClass('d-none'); discount_validation = 'required'; } else { $('.discount_fine_section').addClass('d-none'); discount_validation = ''; } }); jQuery.validator.addMethod("fullnameregex", function(value, element) { return this.optional(element) || /^[a-zA-Z]{3,30}$/.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 3 - 8 digits number: 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'); jQuery.validator.addMethod("alphanumeric_regex", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9 -#]{1,50}$/.test(value); }, 'Please enter alpha characters only'); var v = $("#addEditBatchForm").validate({ ignore: ':hidden', rules: { sfname: { required: true, minlength: 3, maxlength: 30, fullnameregex: true, }, ssname: { required: true, minlength: 1, genral_regex: true }, semail: { required: true, email: true, emailregex: true }, semailre: { required: true, equalTo: '[name="semail"]' }, spaswd: { required: true, minlength: 6, maxlength: 12, passwordregex: true }, spaswdre: { required: true, equalTo: '[name="spaswd"]' }, scontact: { required: true, 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: 8, maxlength: 14, phonenumberregex: true }, scountry: { required: true, genral_regex: true }, sstate: { required: true, genral_regex: true }, saddress1: { required: true }, szipcode: { required: true, zipregex: true }, sibling_id: { required: true, alphanumeric_regex: true }, // school: { // required: true, // }, // photo: { // required: true, // }, // exam: { // required: true, // }, // medical: { // required: true, // }, amount: { required: true }, totalfee: 'required', payment_method: 'required' }, messages: { semailre: { required: "Enter your Email", equalTo: "Please enter the same email address again.", }, 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", }, payment_method: { required: "Please Select Payment Method", }, totalfee: { required: "Fees required", } }, submitHandler: function(form, e) { e.preventDefault(); var appFee = $('#totalfee').val(); var cash = $("#payment_method option:selected").val(); var dic = $("#dicount_scholar option:selected").val(); if (cash === 'cash' && (dic === 'discount' || dic === 'scholarship')) { if (!$('.dynamic_discount').val()) { $('.item_err').empty(); $('.dynamic_discount').after( '<span class="item_err" style="color:red">Please enter amount </span>'); } else if (parseInt($('.dynamic_discount').val()) > parseInt(appFee)) { $('.item_err').empty(); $('.dynamic_discount').after( '<span class="item_err" style="color:red">Please enter amount which is less than the current fee (' + appFee + ')</span>'); } else { $('.item_err').empty(); form.submit(); } } else { $('.item_err').empty(); form.submit(); } } }); function add_dicount_scholar(ele) { $('#discount_scholarship_div').empty(); if (ele.value == 'discount' || ele.value == 'scholarship') { $('#discount_scholarship_div').append( '<input type="text" onkeypress="return numbersOnlyValidation(event)" min="0" onkeyup="deductAmountFromTotalFee(this)" name="scOrDesc" class="dynamic_discount form-control" placeholder="Enter the amount" class="form-control" />' ); } } const deductAmountFromTotalFee = (input_item) => { let deductAmt = (input_item.value) ? input_item.value : 0 let totalfee = $('#totalfee').val(); let TotalpayableAmt = (totalfee) ? totalfee : 0; if (parseInt(deductAmt) > parseInt(TotalpayableAmt)) { $('.item_err').empty(); $(input_item).after( '<span class="item_err" style="color:red">Please enter amount which is less than the current fee (' + TotalpayableAmt + ')</span>'); } else { $('.item_err').empty(); } } function numbersOnlyValidation(e) { var keyCode = e.keyCode || e.which; //Regex for Valid Characters i.e. Alphabets and Numbers. var regex = /^[0-9]+$/; //Validate TextBox value against the Regex. var isValid = regex.test(String.fromCharCode(keyCode)); return isValid; } </script> <script type="text/javascript"> $(function() { $("#sibling").change(function() { if (this.checked) { $('#sibling_outer_div').show(); } else { $('#sibling_outer_div').hide(); } }); $('#sibling_id').change(function() { let val = $(this).val(); if (val.length > 0) { $.ajax({ url: '<?php echo base_url() ?>' + 'admin/ajax_check_if_exists', data: { value: val, column: 'studentId', table: 'students', required: 'parent_username' }, type: 'POST', async: false, success: function(data) { console.log(data); $('#sibling_id_err').empty(); if (data == 'failed') { console.log('failed'); $('#sibling_id_err').text('There is no student with provided Id : ' + val); $('#sibling_id').val(''); } else { console.log(data); $('#sibling_parent').val(data); } } }); } }) }) </script>