Untitled
unknown
plain_text
a year ago
24 kB
6
Indexable
{% load widget_tweaks %} {% load admission_filter %} {% load admission_specific_filter %} <div class="row"> <div class="col-md-6"> <i class="fa-solid fa-arrow-left-long fa-lg" title="Back" name="wizard_goto_step" value="{{ wizard.steps.prev }}" style="color: rgb(12, 12, 140);cursor: pointer;" onclick="goBack()"></i><span style="color: rgb(12, 12, 140);" class="fw-bold"> Employment Details </span> <input type="hidden" name="wizard_goto_step" id="wizard_goto_step" value="{{ wizard.steps.prev }}" /> </div> </div> <br> <div class="row"> <div class="form-group1"> <label for="currentEmpStatus" class="bold">Current Employment Status<span class="text-danger">*</span></label> {{ form.current_employment_status|attr:'required:true'|attr:'class:form-select form-select-lg'|attr:'onchange:employmentCheck()'}} {% if form.current_employment_status.errors %} <span class="alert-danger">Please select Employment Status</span> {% endif %} </div> <div class="form-group1"> <label for="currentOrg" class="bold">Current Organization<span class="text-danger">*</span></label> {% with org=user.email|get_ELOA_org %} {%if user.email|get_payfee_waiver_permission %} {% render_field form.current_organization readonly="true" value=org %} {% else %} {{ form.current_organization|attr:'required:true'|attr:'class:form-control'|attr:'maxlength:250'}} {% endif %} {% endwith %} <!-- <small class="form-text note">NOTE: Max 50 characters allowed</small> --> {% if form.current_organization.errors %} <span class="alert-danger">Please enter Current Organization</span> {% endif %} </div> <!-- Date of Joining Current Organization not for certification program --> {% if not is_certification %} <div class="form-group1"> <label for="currentEmpDate" class="bold">Date of Joining Current Organization<span class="text-danger">*</span></label> {{ form.current_org_employment_date|attr:'required:true'|attr:'class:form-control'|attr:'type:date'|attr:'onfocusout:updateMinDate()'}} <span class="alert-danger fw-normal fs-4" id="dojErr" style="display: none;"></span> {% if form.current_org_employment_date.errors %} <span class="alert-danger">Please select Date of Joining Current Organization</span> {% endif %} </div> {% endif %} <style> .autocomplete { position: relative; } .autocomplete-items { display: none; position: absolute; background-color: #fff; border: 1px solid #ced4da; border-radius: 4px; overflow-y: auto; max-height: 200px; z-index: 1000; width: 100%; scrollbar-width: thin; scrollbar-color: silver #fff; margin-bottom: 10px; } .autocomplete-items::-webkit-scrollbar { width: 10px; } .autocomplete-items::-webkit-scrollbar-track { background: whitesmoke; } .autocomplete-items::-webkit-scrollbar-thumb { background-color: #ced4da; border-radius: 4px; } .autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 13px; transition: background-color 0.3s ease, color 0.3s ease; color: #333; } .autocomplete-item:hover { background-color: #f0f0f0; } .autocomplete-item.selected { background-color: #007bff; color: #fff; } .autocomplete-item.selected:hover { background-color: #0056b3; } .autocomplete-item:not(.selected):hover { transition: background-color 0.3s ease, color 0.3s ease; } </style> <div class="form-group1"> <label for="currentWorkLoc" class="bold">Current Work Location<span class="text-danger">*</span></label> <div class="autocomplete"> {{ form.work_location|attr:'required:true'|attr:'class:form-control'}} {% if form.work_location.errors %} <span class="alert-danger">Please select Work Location</span> {% endif %} <div id="autocomplete-dropdown" class="autocomplete-items"></div> <span class="alert-danger fw-normal fs-4" id="cwlErr" style="display: none;"></span> </div> </div> <script> $(document).ready(function() { $.ajax({ type: "GET", url: "{% url 'registrationForm:location-ajax'%}", cache: false, success: function (data) { autocompleteData = data['locations']; }, async: false, }); }); // JavaScript const inputField = document.getElementById('id_2-work_location'); const errorMessage = document.getElementById('cwlErr'); const autocompleteDropdown = document.getElementById('autocomplete-dropdown'); let selectedOptionIndex = -1; // Initialize selected option index // Function to check if the value is present in the autocomplete array function checkAutocompleteValue(value) { return autocompleteData.includes(value); } // Function to highlight the selected option function highlightOption(index) { const options = document.querySelectorAll('.autocomplete-item'); options.forEach(option => option.classList.remove('selected')); if (index >= 0 && index < options.length) { options[index].classList.add('selected'); } } // Event listener for keydown event on the input field inputField.addEventListener('keydown', function(event) { const options = document.querySelectorAll('.autocomplete-item'); if (event.key === 'ArrowDown') { event.preventDefault(); // Prevent default browser behavior if (options.length > 0) { selectedOptionIndex = (selectedOptionIndex + 1) % options.length; highlightOption(selectedOptionIndex); // Scroll the container to make the selected option visible options[selectedOptionIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } else if (event.key === 'ArrowUp') { event.preventDefault(); // Prevent default browser behavior if (options.length > 0) { selectedOptionIndex = (selectedOptionIndex - 1 + options.length) % options.length; highlightOption(selectedOptionIndex); // Scroll the container to make the selected option visible options[selectedOptionIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } else if (event.key === 'Enter') { if (selectedOptionIndex !== -1) { event.preventDefault(); // Prevent form submission inputField.value = options[selectedOptionIndex].textContent; errorMessage.style.display = 'none'; // Hide error message } // Hide the dropdown after pressing Enter autocompleteDropdown.style.display = 'none'; } else if (event.key === 'Tab') { autocompleteDropdown.style.display = 'none'; } }); // Event listener for input field inputField.addEventListener('input', function() { const inputValue = this.value.trim(); populateAutocompleteOptions(inputValue); }); // Function to populate autocomplete options function populateAutocompleteOptions(inputValue) { const dropdown = autocompleteDropdown; dropdown.innerHTML = ''; autocompleteData.forEach(item => { if (item.toLowerCase().includes(inputValue.toLowerCase())) { const option = document.createElement('div'); option.classList.add('autocomplete-item'); option.textContent = item; option.addEventListener('click', () => { inputField.value = item; dropdown.style.display = 'none'; errorMessage.style.display = 'none'; // Hide error message }); dropdown.appendChild(option); } }); dropdown.style.display = dropdown.children.length > 0 ? 'block' : 'none'; } // Event listener to hide error message when input field gains focus inputField.addEventListener('focus', function() { errorMessage.style.display = 'none'; populateAutocompleteOptions(inputField.value); }); // Event listener to validate input when input field loses focus inputField.addEventListener('blur', function() { const enteredValue = inputField.value.trim(); if (enteredValue !== '' && !checkAutocompleteValue(enteredValue)) { errorMessage.textContent = 'Please select a valid location'; errorMessage.style.display = 'block'; } else { errorMessage.style.display = 'none'; } }); // Event listener for selecting an autocomplete option autocompleteDropdown.addEventListener('click', function(event) { const target = event.target; if (target.classList.contains('autocomplete-item')) { const selectedValue = target.textContent; inputField.value = selectedValue; errorMessage.style.display = 'none'; autocompleteDropdown.style.display = 'none'; } }); window.addEventListener('click', function(event) { if (event.srcElement.id === 'id_2-work_location') { return false; }else if (event.srcElement.className !== 'autocomplete-item') { autocompleteDropdown.style.display = 'none'; } }); </script> <div class="form-group1"> <label for="currentDesignation" class="bold">Current Designation<span class="text-danger">*</span></label> {{ form.current_designation|attr:'required:true'|attr:'class:form-control'|attr:'maxlength:30'}} {% if form.current_designation.errors %} <span class="alert-danger">Please select Current Designation</span> {% endif %} </div> <style> .autocomplete-inds { position: relative; } .autocomplete-items-inds { display: none; position: absolute; background-color: #fff; border: 1px solid #ced4da; border-radius: 4px; overflow-y: auto; max-height: 200px; z-index: 1000; width: 100%; scrollbar-width: thin; scrollbar-color: silver #fff; margin-bottom: 10px; } .autocomplete-items-inds::-webkit-scrollbar { width: 10px; } .autocomplete-items-inds::-webkit-scrollbar-track { background: whitesmoke; } .autocomplete-items-inds::-webkit-scrollbar-thumb { background-color: #ced4da; border-radius: 4px; } .autocomplete-item-inds { padding: 8px 12px; cursor: pointer; font-size: 13px; transition: background-color 0.3s ease, color 0.3s ease; color: #333; } .autocomplete-item-inds:hover { background-color: #f0f0f0; } .autocomplete-item-inds.selected { background-color: #007bff; color: #fff; } .autocomplete-item-inds.selected:hover { background-color: #0056b3; } .autocomplete-item-inds:not(.selected):hover { transition: background-color 0.3s ease, color 0.3s ease; } </style> <div class="form-group1"> <label for="currentOrgIndustry" class="bold">Current Industry<span class="text-danger">*</span></label> <div class="autocomplete-inds"> {{ form.current_org_industry|attr:'required:true'|attr:'class:form-control'}} {% if form.current_org_industry.errors %} <span class="alert-danger">Please select Current Industry</span> {% endif %} <div id="autocomplete-dropdown-inds" class="autocomplete-items-inds"></div> <span class="alert-danger fw-normal fs-4" id="coiErr" style="display: none;"></span> </div> </div> <script> $(document).ready(function() { $.ajax({ type: "GET", url: "{% url 'registrationForm:industry-ajax'%}", cache: false, success: function (data) { autocompleteDataInds = data['industry']; }, async: false, }); }); // JavaScript const inputFieldInds = document.getElementById('id_2-current_org_industry'); const errorMessageInds = document.getElementById('coiErr'); const autocompleteDropdownInds = document.getElementById('autocomplete-dropdown-inds'); let selectedOptionIndexInds = -1; // Initialize selected option index // Function to check if the value is present in the autocomplete array function checkAutocompleteValueInds(value) { return autocompleteDataInds.includes(value); } function highlightOptionInds(index) { const options = document.querySelectorAll('.autocomplete-item-inds'); options.forEach(option => option.classList.remove('selected')); if (index >= 0 && index < options.length) { options[index].classList.add('selected'); } } // Event listener for keydown event on the input field inputFieldInds.addEventListener('keydown', function(event) { const optionsInds = document.querySelectorAll('.autocomplete-item-inds'); if (event.key === 'ArrowDown') { event.preventDefault(); // Prevent default browser behavior if (optionsInds.length > 0) { selectedOptionIndexInds = (selectedOptionIndexInds + 1) % optionsInds.length; highlightOptionInds(selectedOptionIndexInds); // Scroll the container to make the selected option visible optionsInds[selectedOptionIndexInds].scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } else if (event.key === 'ArrowUp') { event.preventDefault(); // Prevent default browser behavior if (optionsInds.length > 0) { selectedOptionIndexInds = (selectedOptionIndexInds - 1 + optionsInds.length) % optionsInds.length; highlightOptionInds(selectedOptionIndexInds); // Scroll the container to make the selected option visible optionsInds[selectedOptionIndexInds].scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } else if (event.key === 'Enter') { if (selectedOptionIndexInds !== -1) { event.preventDefault(); // Prevent form submission inputFieldInds.value = optionsInds[selectedOptionIndexInds].textContent; errorMessageInds.style.display = 'none'; // Hide error message } // Hide the dropdown after pressing Enter autocompleteDropdownInds.style.display = 'none'; } else if (event.key === 'Tab') { autocompleteDropdownInds.style.display = 'none'; } }); // Event listener for input field inputFieldInds.addEventListener('input', function() { const inputValue = this.value.trim(); populateAutocompleteOptionsInds(inputValue); }); // Function to populate autocomplete options function populateAutocompleteOptionsInds(inputValue) { const dropdown = autocompleteDropdownInds; dropdown.innerHTML = ''; autocompleteDataInds.forEach(item => { if (item.toLowerCase().includes(inputValue.toLowerCase())) { const option = document.createElement('div'); option.classList.add('autocomplete-item-inds'); option.textContent = item; option.addEventListener('click', () => { inputFieldInds.value = item; dropdown.style.display = 'none'; errorMessageInds.style.display = 'none'; // Hide error message }); dropdown.appendChild(option); } }); dropdown.style.display = dropdown.children.length > 0 ? 'block' : 'none'; } // Event listener to hide error message when input field gains focus inputFieldInds.addEventListener('focus', function() { errorMessageInds.style.display = 'none'; populateAutocompleteOptionsInds(inputFieldInds.value); }); // Event listener to validate input when input field loses focus inputFieldInds.addEventListener('blur', function() { const enteredValue = inputFieldInds.value.trim(); if (enteredValue !== '' && !checkAutocompleteValueInds(enteredValue)) { errorMessageInds.textContent = 'Please select a valid Industry'; errorMessageInds.style.display = 'block'; } else { errorMessageInds.style.display = 'none'; } }); // Event listener for selecting an autocomplete option autocompleteDropdownInds.addEventListener('click', function(event) { const target = event.target; if (target.classList.contains('autocomplete-item-inds')) { const selectedValue = target.textContent; inputFieldInds.value = selectedValue; errorMessageInds.style.display = 'none'; autocompleteDropdownInds.style.display = 'none'; } }); window.addEventListener('click', function(event) { if (event.srcElement.id === 'id_2-current_org_industry'){ return false; } else if (event.srcElement.className !== 'autocomplete-item-inds') { autocompleteDropdownInds.style.display = 'none'; } }); </script> <div class="form-group1"> <label for="feePaymentOwner" class="bold">Fee Payment<span class="text-danger">*</span></label> {{ form.fee_payment_owner|attr:'required:true'|attr:'class:form-select form-select-lg'}} {% if form.fee_payment_owner.errors %} <span class="alert-danger">Please select Fee Payment Entity</span> {% endif %} </div> <!-- Only for certification program - total_work_experience_in_months--> {% if is_certification %} <div class="form-group1"> <label for="workExperience" class="bold">Total Work Experience in Years:<span class="text-danger">*</span></label> {{ form.total_work_experience_in_months|attr:'required:true'|attr:'class:form-control'}} {% if form.total_work_experience_in_months.errors %} <span class="alert-danger">Please enter Work Experience in Years</span> {% endif %} </div> {% endif %} <!-- employee number not for certification program --> {% if not is_certification%} {% if form.current_org_employee_number.label %} <div class="form-group1"> <label for="currentEmpNum" class="bold">Current Employee Number</label> {% with org=user.email|get_ELOA_org_num %} {%if user.email|get_payfee_waiver_permission %} {% render_field form.current_org_employee_number readonly="true" value=org %} {% else %} {{form.current_org_employee_number|attr:'maxlength:15'|attr:'class:form-control'}} {% endif %} {% endwith %} {% if form.current_org_employee_number.errors %} <span class="alert-danger">Please enter Employee Number</span> {% endif %} </div> {% endif %} {% endif %} </div> <br> <!-- Prior Employment not for certification program --> {% if not is_certification %} <div class="row"> <div class="d-flex justify-content-between align-items-center"> <span style="color: rgb(12, 12, 140);" class="fw-bold">Prior Employment (<span class="fs-5">Prior employment dates should be EARLIER than your current organization joining date</span>)</span> </div> </div> <br> <div class="row"> <div class="col-md-12 d-flex align-items-end table-responsive"> <table class="table text-center table-sm"> <thead class="table-info"> <tr> <th scope="col">Organization</th> <th scope="col">Designation</th> <th scope="col">Start Date</th> <th scope="col">End Date</th> <th scope="col">Edit</th> <th scope="col">Delete</th> </tr> </thead> {% if not scwe %} <tbody class="fs-5 table-light" id="exp_tbody"> </tbody> {% else %} <tbody class="fs-5 table-light" id="exp_tbody"> {% for i in scwe %} <tr id="exp{{i.id}}"> <td>{{i.organization}}</td> <td>{{i.designations}}</td> <td>{{i.start_date}}</td> <td>{{i.end_date}}</td> <td><i class="fas fa-edit fa-lg" data-id="{{i.id}}" onclick="scweEdit(event)"></i></td> <td><i class="fa-regular fa-trash-can fa-lg" aria-hidden="true" data-id="{{i.id}}" onclick="scweDel(event)"></i></td> </tr> {% endfor %} </tbody> {% endif %} </table> </div> </div> <div class="row mb-2"> <div class="d-flex justify-content-center"> <button type="button" class="btn btn-rounded btn-primary btn-add-qual" id="myBtn" onclick="openPopUp('emp')"> Add Employment </button> </div> </div> {% if error_exp %} <br> <div class="row fs-4 fw-bold text-center text-danger"> <span> {{ error_exp }} </span> </div> {% endif %} {% else %} {% endif %} <div class="modal fade" id="unemployed" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-center fw-bold fs-4" id="exampleModalLabel">Current Employment Status - Unemployed</h5> </div> <div class="modal-body text-center fw-4"> You are not eligible for the program. </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <br>
Editor is loading...
Leave a Comment