EVOLUTION-NINJA
Edit File: add_expence.php
<?php echo view('includes/home_sidebar');?> <style> #leftDiv { height: 1260px !important; } /* <!-- -------FEE COLLECTION AND BACK BUTTON---------- --> */ .expense_report_block { display: flex; justify-content: space-between; padding: 8px; border-bottom: 3px solid #8D8D8D; } .expense_report-heading { margin: 0; padding: 3px; align-self: center; color: #003352; /* font-size: 20px; */ font-weight: 600; } .back-butt { color: #606060; font-size: 21px; font-weight: 500; outline: none; border: none } /* expense report input block- */ .expense_report h5 { color: #0065A3; font-size: 17px; font-weight: 600; } .expense_report { background-color: #EFF3FC; padding: 15px 25px; } .inp-boxes-expense { border: none; box-shadow: 0px 0px 3px #ccc; background-color: white !important; } .expense_report label { padding: 5px 10px; font-size: 15px; margin-block: 4px; font-weight: 500; color: #606060; } /* submit and cancel button */ .expense-submit-button { color: white; width: 100%; background: linear-gradient(#4E79FF, #71ACFF); border: none; outline: none; font-size: 18px; padding: 5px 4px; font-weight: 500; } .submit-cancel-buttons { display: flex; align-items: end; } @media screen and (max-width:728px) { .expense_report, .expense_report_block { width: 97vw; } } .star-mad { color: #c83434; font-size: 20px; position: relative; top: 2px; } </style> <main id="rightDiv"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <!-- -----EXPENSE AND BACK BUTTON---------- --> <section class="expense_report_block"> <h3 class="expense_report-heading">Add Expense</h3> <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </section> <form id="expenseform"> <section> <div class="expense_report container-fluid"> <h5>Expense Information</h5> <div class="row"> <div class="col-sm-4"> <label for="expense-type">Expense Type <span class="star-mad">*</span></label></br> <select class="form-select inp-boxes-expense" id="expense-type" name="expense_type" required> </select> </div> <div class="col-sm-4"> <label for="expense-amount">Expense Amount <span class="star-mad">*</span></label></br><input type="text" placeholder="" name="expence_amount" id="expense-amount" class="form-control inp-boxes-expense" required/> </div> <div class="col-sm-4 mt-2"> <label for="expense-towards-account">Expense Towards Account </label></br><input type="text" placeholder="" id="expense-towards-account" name="expence_towards_account" class="form-control inp-boxes-expense" /> </div> </div> <div class="row"> <div class="col-sm-4"> <label for="expense-report-date">Date (dd/mm/yyyy) <span class="star-mad">*</span></label></br><input type="date" placeholder="" name="date" id="expense-report-date" class="form-control inp-boxes-expense" required/> </div> <div class="col-sm-4 mt-2"> <label for="reference-number">Reference Number</label></br><input type="text" placeholder="" name="reference_number" id="reference-number" class="form-control inp-boxes-expense" /> </div> <div class="col-sm-4 mt-2"> <label for="payment-by">Payment By</label></br><input type="text" placeholder="" id="payment-by" name="payment_by" class="form-control inp-boxes-expense" /> </div> </div> <div class="row"> <div class="col-sm-4"> <label for="payment-mode">Payment Mode<span class="star-mad">*</span></label></br> <select class="form-select inp-boxes-expense" id="payment_mode" name="payment_mode" required> <option value="" disabled selected hidden>Select</option> <option value="Card" required>Card</option> <option value="Cash" required>Cash</option> <option value="Online" required>Online</option> <option value="QR code" required>QR code</option> </select> </div> <div class="col-sm-4 mt-2"> <label for="vendor-name">Vendor Name</label></br><input type="text" placeholder="" name="vendor_name" id="vendor-name" class="form-control inp-boxes-expense" /> </div> <!-- submit and Cancel button----------- --> <div class="col-sm-2 submit-cancel-buttons mt-2"> <button type="submit" class="submit-student-form expense-submit-button" id="expense-submit">Submit</button> </div> <div class="col-sm-2 submit-cancel-buttons mt-2"> <!-- <button type="submit" class="submit-student-form expense-submit-button" id="expense-cancel">Cancel</button> --> </div> </div> </div> </section> </form> </div> </div> </div> </section> </main> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet"> <script> // Application form $(document).ready(function () { $('#expenseform').submit(function (e) { e.preventDefault(); var formdata = new FormData($(this)[0]); $('#expense-submit').text('Sumitting...'); $('#expense-submit').attr('disabled', 'disabled'); $.ajax({ type: 'post', url: '<?php echo base_url("add-expense");?>', data: formdata, contentType: false, processData: false, success: function (response) { if (response.result == 1) { Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000 }); $('#expenseform')[0].reset(); // $('#datatable').DataTable().ajax.reload(); window.location.href = '<?php echo base_url("expence-list");?>'; } else { Swal.fire({ icon: "error", title: response.message, showConfirmButton: false, timer: 1000 }); } $('#expense-submit').removeAttr('disabled').text("SUBMIT"); }, error: function (xhr, textStatus, errorThrown) { console.error(xhr.responseText); Swal.fire({ icon: "error", title: "An error occurred", showConfirmButton: false, timer: 1000 }); }, complete: function () { $('#expense-submit').removeAttr('disabled').text("SUBMIT"); } }); }); }); </script> <script> $(document).ready(function () { $.ajax({ type: 'GET', url: '<?php echo base_url("add-expense-value");?>?', dataType: 'json', success: function (response) { if (response.result == 1) { var options = response.data; var selectElement = $('#expense-type'); selectElement.empty(); $('#description').html('<option value="" selected >Select value</option>'); $.each(options, function (index, option) { selectElement.append($('<option>', { value: option.id, text: option.expense_name })); }); } else { $('#description').html('<option value="">value not found</option>'); } }, error: function (xhr, status, error) { console.error(xhr.responseText); } }); }); </script> <!-- BACK BUTTON SCRIPT --> <script> function goBack() { window.location.href = 'dashboard'; } </script> <script> window.onload = function () { const leftDiv = document.getElementById('leftDiv'); const rightDiv = document.getElementById('rightDiv'); const rightDivHeight = rightDiv.offsetHeight; leftDiv.style.height = rightDivHeight + 'px'; }; </script> <?php echo view('includes/footer'); ?>