<style> label.error { color: red; } </style> <main class="common_margin" id="main"> <div class="main-wrap"> <div class="my-info-inner"> <?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 } ?> <?php if(empty($hostel_fees)) { echo '<p>Hostel Fees has not been created for this student\'s batch or course</p>'; } else { ?> <div class="payment-selection-wrap"> <form action="<?php base_url() ?>get_hostel_details" id="hostel-form" method="post"> <div class="hostel_details_wrap"> <h4 class="payment_subhead">Select Hostel Plan</h4> <ul class="hostel_details_info"> <input type="hidden" id="fee_name" name="feetype_name"> <?php foreach ($hostel_fees as $key => $value) { ?> <li> <div class="radio_btn"> <input type="radio" onclick="getInstallments(this)" value="<?= $value['cf_id'] ?>" name="course_fee_id" class="radio_b"> <span class="checkmark"></span> </div> ₹<?= $value['amount'] ?>/Year - <?= $value['fee_values'] ?> <div class="installment-container"> </div> </li> <?php } ?> </ul> <label id="course_fee_id-error" class="error" for="course_fee_id"></label> <div class="hostel_btn"> <button type="submit" class="join-class-btn">Continue</button> </div> </div> </form> </div> </div> </div> </main> <?php } ?> <script> $(document).ready(function() { $("#hostel-form").validate({ rules: { course_fee_id : "required", installment_type : "required" }, messages: { course_fee_id : "Please choose 1 Hostel Plan", installment_type : "Please choose 1 installment type", }, submitHandler: function(form) { form.submit(); } }); }) const getInstallments = function(ele) { $('.installment-container').empty(); let course_fee_id = ele.value; let installmentContainer = $(ele).parent().siblings('.installment-container'); $.ajax({ type : 'POST', url : "<?php echo base_url(); ?>student/ajax_get_hostel_installments", data : { id : course_fee_id }, success:function(response){ if(!response) { $(installmentContainer).append('<p style="color:red">Installments have not been created for this fees. Please contact administrator for further service</p>'); } else { $(installmentContainer).append(response); } }, }); } </script>