EVOLUTION-NINJA
Edit File: edit_form.php
<?php echo view('includes/home_sidebar');?> <style> /* -------ADDSTUDENT AND BACK BUTTON---------- */ #leftDiv{ height: 1000px !important; } .Add-student { display: flex; justify-content: space-between; padding: 8px; border-bottom: 3px solid #8D8D8D; } .add-stud { background-color: #0065A3; color: #ffffff; font-size: 16px; font-weight: 500; } .add-stud:hover { background-color: #0065A3; opacity: 0.9; } .back-butt { color: #606060; font-size: 21px; font-weight: 500; outline: none; border: none } /* -- ----------FORM SECTION----------- */ .student-education-detail { background-color: #ABC0F1; padding: 10px 25px; display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); } .form-select { height: 40px; width: 100%; font-size: 15px; font-weight: 500; } .detail-names>h6 { color: #444; } .student-form-detail-entry { margin-top: 10px; padding: 15px 25px; height: auto; background-color: #EFF3FC; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); gap: 5px; grid-template-areas: "a1 a2 a3 a4" "a5 a6 a7 a4" "a8 a9 a10 a4" "a11 a11 a12 ." "a13 a14 a15 ." "a16 a17 a18 ." "a19 a19 a20 ."; } .student-form-detail-entry>div { padding: 5px 10px; font-size: 15px; margin-block: 4px; font-weight: 500; color: #606060; } .a1 { grid-area: a1; } .a2 { grid-area: a2; } .a3 { grid-area: a3; } .a4 { grid-area: a4; /* & input { height: 70px; } */ } .a5 { grid-area: a5; } .a6 { grid-area: a6; } .a7 { grid-area: a7; } .a8 { grid-area: a8; } .a9 { grid-area: a9; } .a10 { grid-area: a10; } .a11 { grid-area: a11; } .a12 { grid-area: a12; } .a13 { grid-area: a13; } .a14 { grid-area: a14; } .a15 { grid-area: a15; } .a16 { grid-area: a16; } .a17 { grid-area: a17; } .a18 { grid-area: a18; } .a19 { grid-area: a19; } .a20 { grid-area: a20; display: flex; align-items: end; } .submit-student-form { color: white; width: 100%; background: linear-gradient(#4E79FF, #71ACFF); border: none; outline: none; font-size: 18px; padding: 5px 4px; font-weight: 500; } .inp-boxes { border: none; box-shadow: 0px 0px 3px #ccc; background-color: white !important; } @media only screen and (max-width:728px) { .Add-student { width:100vw; } .add-stud { background-color: #0065A3; color: #ffffff; font-size: 12px; font-weight: 400; width:59% } .student-education-detail { width: 95vw; margin: auto; padding: 9px 7px; gap: 15px; grid-template-columns: repeat(1, 1fr); } .student-form-detail-entry { width: 95vw; display:inherit; } } @media only screen and(max-width:992px){ .student-form-detail-entry { margin-top: 10px; padding: 10px ; height: auto; background-color: #EFF3FC; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 5px; grid-template-areas: "a1 a2" "a3 a4" "a5 a6" "a7 a8" "a9 a10" "a11 a12" "a13 a14" "a15 a16" "a17 a18" "a19 a20"; } } .input-fields-student-form .div-img--contents { display: flex; flex-direction: column; align-items: center; } .input-fields-student-form .img-wrapper { position: relative; width: 200px; height: 200px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .input-fields-student-form .img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: none; /* Initially hidden */ } .input-fields-student-form .custom-btn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .input-fields-student-form .custom-btn:hover { background-color: #0056b3; } .input-fields-student-form .default-btn { display: none; /* Hide the default file input */ } .star-mad { color: #c83434; font-size: 20px; position: relative; top: 2px; } </style> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <section class="Add-student row"> <!-- <button class="btn add-stud">Add Students Application <i class="fa fa-plus" aria-hidden="true"></i></button> --> <div class="col-sm-4 "> <h3 style="color: rgba(0, 72, 76, 1);">Edit Lead</h3> </div> <div class="col-sm-7"></div> <div class="col-sm-1"> <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </div> </section> <!-- -------ADDSTUDENT AND BACK BUTTON---------- --> <!-- ----------FORM SECTION----------- --> <section class="mt-3"> <div class="student-form-detail-entry"> <input type="hidden" name="leadId" id="leadId" value=""> <div class="input-fields-student-form a1"> <label for="First-Name">First Name <span class="star-mad">*</span></label><br> <input type="text" placeholder="" id="First-Name" class="inp-boxes form-control" name="first_name" value="<?= $leadData['first_name'] ?>" required/> </div> <div class="input-fields-student-form a2 mt-2"> <label for="Last-Name">Last Name </label><br> <input type="text" placeholder="" id="Last-Name" class="inp-boxes form-control mt-1" name="last_name" /> </div> <div class="input-fields-student-form a3"> <label for="date">Date (dd/mm/yyyy) <span class="star-mad">*</span></label><br> <input type="date" id="date" class="inp-boxes form-control" name="Date" required/> </div> <div class="input-fields-student-form a4"> <div class="div-img--contents"> <label for="">Upload Photo</label> <div class="img-wrapper inp-boxes"> <div class="img--upload"> <img src="" alt="" id="up-img"> </div> </div> <input type="file" class="default-btn" name="file" hidden> <button type="button" class="custom-btn btn" onclick="referDefaultBtn()">UPLOAD</button> </div> </div> <div class="input-fields-student-form a5 mt-2"> <label for="dob">DOB (dd/mm/yyyy)</label><br> <input type="date" placeholder="" id="dob" class="inp-boxes form-control mt-1" name="DOB"/> </div> <div class="input-fields-student-form a6"> <label for="Email">Email <span class="star-mad">*</span></label><br> <input type="email" placeholder="" id="Email" class="inp-boxes form-control" name="email" required/> </div> <div class="input-fields-student-form a7"> <label for="student-gender">Gender <span class="star-mad">*</span></label><br> <select class="form-select inp-boxes" id="student-gender" name="gender" required> <option value="">Select</option> <option value="Male">Male</option> <option value="Female">Female</option> <option value="Other">Other</option> </select> </div> <div class="input-fields-student-form a8"> <label for="ph-num">Mobile <span class="star-mad">*</span></label><br> <input type="tel" oninput="validateInputnum(this)" placeholder="" id="ph-num" class="inp-boxes form-control" name="mobile_no" required/> </div> <div class="input-fields-student-form a9"> <label for="student-qualification">Qualification <span class="star-mad">*</span></label><br> <input type="text" placeholder="" id="student-qualification" class="inp-boxes form-control" name="qualification" required/> </div> <div class="input-fields-student-form a10"> <label for="student-source">Source <span class="star-mad">*</span></label><br> <select class="form-select inp-boxes" id="student-source" name="source" required> <option value="">Select</option> <option value="Just Dial">Just Dial</option> <option value="Social Media">Social Media</option> <option value="Referred by Friend">Referred by Friend</option> </select> </div> <div class="input-fields-student-form a11"> <label for="student-address">Address <span class="star-mad">*</span></label><br> <textarea name="address" id="student-address" class="form-control" required></textarea> </div> <div class="input-fields-student-form a12 mt-2"> <label for="student-profession">Profession</label><br> <select class="form-select inp-boxes mt-1" id="student-profession" name="profession"> <option value="">Select</option> <option value="Student">Student</option> <option value="Working">Working</option> </select> </div><br> <div class="detail-names"> <h6>City <span class="star-mad">*</span></h6> <input type="text" class="form-control inp-boxes" id="student-city" name='city' required> </div> <div class="detail-names"> <h6>Country <span class="star-mad">*</span></h6> <!-- <input type="text" class="form-control inp-boxes" id="student-country" name='country' required> --> <input type="text" class="form-control inp-boxes" id="student-country" name="country" style="width: 100%;"> <!-- <select class="form-select inp-boxes" id="student-country" name="country" required> <option value="">Select</option> <option value="India">India</option> </select> --> </div> <div class="detail-names mt-2"> <h6>Status</h6> <!-- <input type="text" class="form-control inp-boxes" id="student-status"> --> <select class="form-select inp-boxes" id="student-status" name="status"> <option value="">Select</option> <option value="Employed">Employed</option> <option value="UnEmployed">UnEmployed</option> </select> </div> <div class="input-fields-student-form a16"> <label for="course-offered-tostudents">Course Offered <span class="star-mad">*</span></label><br> <input type="text" placeholder="" id="course-offered-tostudents" class="inp-boxes form-control" required> </div> <div class="input-fields-student-form a17"> <label for="Counselor-Name">Counselor Name <span class="star-mad">*</span></label><br> <input type="text" placeholder="" id="Counselor-Name" class="inp-boxes form-control" required> </div> <div class="input-fields-student-form a18 mt-2"> <label for="College-Company-Name">College / Company Name</label><br> <input type="text" placeholder="" id="College-Company-Name" class="inp-boxes form-control mt-1"> </div> <div class="input-fields-student-form a19"> <label for="student-Remarks">Remarks</label><br> <input type="text" placeholder="" id="student-Remarks" class="inp-boxes form-control"> </div> <div class="input-fields-student-form a20"> <button type="button" class="btn btn-info" onclick="updateStudent()">Update</button> </div> </div> </div> </section> </div> </div> </div> <!-- Only numerical numbers,space and + are allowed --> <script> function validateInputnum(inputField) { var regex = /^[0-9\s\+]+$/; var inputValue = inputField.value; if (!regex.test(inputValue)) { inputField.value = inputValue.replace(/[^0-9\s\+]/g, ''); toastr.error('Only numerical numbers,space and + are allowed.'); } } </script> <!-- BACK BUTTON SCRIPT --> <script> function goBack() { // window.history.back(); } </script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> let defaultButton = document.querySelector(".default-btn"); let customButton = document.querySelector(".custom-btn"); let image = document.getElementById("up-img"); function referDefaultBtn() { defaultButton.click(); } defaultButton.addEventListener("change", function () { const file = this.files[0]; if (file) { let reader = new FileReader(); reader.onload = function () { const result = reader.result; image.src = result; image.style.display = "block"; } reader.readAsDataURL(file); } }); $(document).ready(function() { $(document).ready(function() { var leadId = '<?php echo isset($_GET['leadId']) ? $_GET['leadId'] : '' ?>'; if (leadId !== '') { $.ajax({ type: 'GET', url: '<?= site_url('get_lead_details') ?>', data: { leadId: leadId }, success: function(response) { // Populate input fields with fetched data $('#First-Name').val(response.first_name); $('#Last-Name').val(response.last_name); $('#Email').val(response.email); $('#dob').val(response.DOB); $('#date').val(response.Date); $('#ph-num').val(response.mobile_no); $('#student-address').val(response.address); $('#student-city').val(response.city); $('#course-offered-tostudents').val(response.course_offered); $('#student-qualification').val(response.qualification); $('#student-country').val(response.country); $('#Counselor-Name').val(response.counselor_name); $('#student-gender').val(response.gender); $('#student-source').val(response.source); $('#student-profession').val(response.profession); $('#student-status').val(response.status); $('#College-Company-Name').val(response.company_name); $('#student-Remarks').val(response.remarks); $('#leadId').val(leadId); $('#up-img').attr('src', '<?= base_url('public/assets/lead_profileImg/') ?>' + response.profile_img) .show(); }, error: function(xhr, status, error) { console.error('Error fetching lead details:', error); } }); } }); }); // function updateStudent() { // var leadId = '<?php echo isset($_GET['leadId']) ? $_GET['leadId'] : '' ?>'; // var formData = $('#editForm').serialize(); // var url = '<?= site_url('update_lead') ?>'; // $.ajax({ // type: 'POST', // url: url, // data: { leadId: leadId }, // success: function(data) { // console.log('Updated successfully:', data); // // window.location.href = '<?php echo base_url('/');?>'; // }, // error: function(xhr, status, error) { // console.error('Error updating student:', error); // } // }); // } // function updateStudent() { // var formData = new FormData(); // formData.append('leadId', $('#leadId').val()); // formData.append('first_name', $('#First-Name').val()); // formData.append('last_name', $('#Last-Name').val()); // formData.append('Date', $('#date').val()); // formData.append('DOB', $('#dob').val()); // formData.append('email', $('#Email').val()); // formData.append('gender', $('#student-gender').val()); // formData.append('mobile_no', $('#ph-num').val()); // formData.append('qualification', $('#student-qualification').val()); // formData.append('source', $('#student-source').val()); // formData.append('address', $('#student-address').val()); // formData.append('profession', $('#student-profession').val()); // formData.append('city', $('#student-city').val()); // formData.append('country', $('#student-country').val()); // formData.append('status', $('#student-status').val()); // formData.append('course_offered', $('#course-offered-tostudents').val()); // formData.append('counselor_name', $('#Counselor-Name').val()); // formData.append('company_name', $('#College-Company-Name').val()); // formData.append('remarks', $('#student-Remarks').val()); // $.ajax({ // url: '<?= base_url('updateLead') ?>', // type: 'POST', // data: formData, // processData: false, // contentType: false, // success: function(response) { // console.log('Student data updated successfully'); // // Show success message using SweetAlert2 // Swal.fire({ // icon: 'success', // title: 'Success', // text: 'Lead data updated successfully!', // confirmButtonText: 'OK' // }).then((result) => { // if (result.isConfirmed) { // // Redirect or perform any other action // window.location.href = '<?php echo base_url('/leads');?>'; // } // }); // }, // error: function(jqXHR, textStatus, errorThrown) { // console.error('Error updating student data: ' + textStatus, errorThrown); // // Optionally notify the user of the error // } // }); // } function updateStudent() { // Perform form validation if (!validateForm()) { return; // If validation fails, exit function } var formData = new FormData(); formData.append('leadId', $('#leadId').val()); formData.append('file', $('input[type=file]')[0].files[0]); formData.append('first_name', $('#First-Name').val()); formData.append('last_name', $('#Last-Name').val()); formData.append('Date', $('#date').val()); formData.append('DOB', $('#dob').val()); formData.append('email', $('#Email').val()); formData.append('gender', $('#student-gender').val()); formData.append('mobile_no', $('#ph-num').val()); formData.append('qualification', $('#student-qualification').val()); formData.append('source', $('#student-source').val()); formData.append('address', $('#student-address').val()); formData.append('profession', $('#student-profession').val()); formData.append('city', $('#student-city').val()); formData.append('country', $('#student-country').val()); formData.append('status', $('#student-status').val()); formData.append('course_offered', $('#course-offered-tostudents').val()); formData.append('counselor_name', $('#Counselor-Name').val()); formData.append('company_name', $('#College-Company-Name').val()); formData.append('remarks', $('#student-Remarks').val()); $.ajax({ url: '<?= base_url('updateLead') ?>', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { console.log('Student data updated successfully'); // Show success message using SweetAlert2 Swal.fire({ icon: 'success', title: 'Success', text: 'Lead data updated successfully!', confirmButtonText: 'OK' }).then((result) => { if (result.isConfirmed) { // Redirect or perform any other action window.location.href = '<?php echo base_url('/leads');?>'; } }); }, error: function(jqXHR, textStatus, errorThrown) { console.error('Error updating student data: ' + textStatus, errorThrown); // Optionally notify the user of the error // Show error message using SweetAlert2 Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to update student data. Please try again later.', confirmButtonText: 'OK' }); } }); } function validateForm() { var isValid = true; // Flag to track overall form validity // Check each required field if ($('#First-Name').val() === '') { $('#First-Name').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your first name.', confirmButtonText: 'OK' }); } else { $('#First-Name').removeClass('is-invalid'); } if ($('#date').val() === '') { $('#date').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter a date.', confirmButtonText: 'OK' }); } else { $('#date').removeClass('is-invalid'); } if ($('#Email').val() === '') { $('#Email').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your email address.', confirmButtonText: 'OK' }); } else { $('#Email').removeClass('is-invalid'); } if ($('#student-qualification').val() === '') { $('#student-qualification').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your Qualification.', confirmButtonText: 'OK' }); } else { $('#student-qualification').removeClass('is-invalid'); } if ($('#student-gender').val() === '') { $('#student-gender').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please select your gender.', confirmButtonText: 'OK' }); } else { $('#student-gender').removeClass('is-invalid'); } if ($('#ph-num').val() === '') { $('#ph-num').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your mobile number.', confirmButtonText: 'OK' }); } else { $('#ph-num').removeClass('is-invalid'); } if ($('#qualification').val() === '') { $('#qualification').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your qualification.', confirmButtonText: 'OK' }); } else { $('#qualification').removeClass('is-invalid'); } if ($('#student-source').val() === '') { $('#student-source').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please select the Source.', confirmButtonText: 'OK' }); } else { $('#student-source').removeClass('is-invalid'); } if ($('#student-address').val() === '') { $('#student-address').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your Address.', confirmButtonText: 'OK' }); } else { $('#student-address').removeClass('is-invalid'); } if ($('#student-city').val() === '') { $('#student-city').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your City.', confirmButtonText: 'OK' }); } else { $('#student-city').removeClass('is-invalid'); } if ($('#student-country').val() === '') { $('#student-country').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please Select your Country.', confirmButtonText: 'OK' }); } else { $('#student-country').removeClass('is-invalid'); } if ($('#course-offered-tostudents').val() === '') { $('#course-offered-tostudents').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter your Course Offered.', confirmButtonText: 'OK' }); } else { $('#course-offered-tostudents').removeClass('is-invalid'); } if ($('#Counselor-Name').val() === '') { $('#Counselor-Name').addClass('is-invalid'); isValid = false; // Mark form as invalid Swal.fire({ icon: 'error', title: 'Validation Error', text: 'Please enter Counselor Name.', confirmButtonText: 'OK' }); } else { $('#Counselor-Name').removeClass('is-invalid'); } return isValid; } </script> <!-- BACK BUTTON SCRIPT --> <script> function goBack() { window.location.href = "<?php echo base_url('leads');?>"; } </script> <!-- mobile code inmage --> <script type="text/javascript" src="<?php echo base_url('public/assets/js/intlTelInput.js');?>"></script> <script> var input = document.querySelector("#ph-num"); window.intlTelInput(input, { autoPlaceholder: "on", utilsScript: "<?php echo base_url('public/assets/js/utils.js');?>", }); </script> <script type="text/javascript" src="<?php echo base_url('public/assets/js/countrySelect.js');?>"></script> <script type="text/javascript"> $("#student-country").countrySelect(); </script> <!-- mobile code inmage end --> <?php echo view('includes/footer'); ?>