Untitled
unknown
plain_text
a year ago
32 kB
10
Indexable
{% load widget_tweaks %}
<div id="toastContainer1" class="toast-container"></div>
<form action="">
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
{% if wizard.steps.current == '1' %}
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title fw-bolder fs-3" id="exampleModalLabel">Add Qualification</h4>
</div>
<!-- Modal Body -->
<div class="modal-body fw-bolder">
<div class="row">
<div class="col-md-5">
<label for="qualCat" class="fw-normal fs-4">Qualification Level<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.qual_cat|attr:'required:true'|attr:'class:form-select form-select-lg'|attr:'onchange:QualCategory();' }}
{% if form.qual_cat.errors %}
<span class="alert-danger">Please select Qualification Level</span>
{% endif %}
</div>
</div>
<br>
<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;
font-weight: normal;
}
.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="row">
<div class="col-md-5">
<label for="degree" class="fw-normal fs-4">Qualification Name<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
<div class="autocomplete-inds">
{{ form.degree|attr:'required:true'|attr:'class:form-control'|attr:'onchange:OtherBox(this);'|attr:'onfocusout:ListOfDiscipline();'}}
<div id="autocomplete-dropdown-inds" class="autocomplete-items-inds"></div>
{{ form.other_degree|attr:'class:form-control'|attr:'placeholder:Other Qualification' }}
<span class="alert-danger fw-normal fs-4" id="degErr" style="display: none;"></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "{% url 'registrationForm:qual-category-ajax1'%}",
cache: false,
success: function (data) {
autocompleteDataInds = data['degree'];
},
async: false,
});
});
// JavaScript
const inputFieldInds = document.getElementById('id_1-degree');
const errorMessageInds = document.getElementById('degErr');
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 Qualification Name';
errorMessageInds.style.display = 'block';
} else {
errorMessageInds.style.display = 'none';
}
$("#id_1-discipline").val('');
});
// Event listener for selecting an autocomplete option
autocompleteDropdownInds.addEventListener('click', function(event) {
const target = event.target;
if (target.classList.contains('autocomplete-item-inds')) {
ListOfDiscipline();
const selectedValue = target.textContent;
inputFieldInds.value = selectedValue;
let select_input = $("#id_1-other_degree");
if (selectedValue == "Others"){
select_input.attr("type", "text");
select_input.show();
select_input.attr("required","true");
}
else{
select_input.attr("type","hidden");
select_input.removeAttr("required");
select_input.val('');
}
$("#id_1-discipline").val('');
errorMessageInds.style.display = 'none';
autocompleteDropdownInds.style.display = 'none';
}
});
window.addEventListener('click', function(event) {
if (event.srcElement.id === 'id_1-degree'){
return false;
} else if (event.srcElement.className !== 'autocomplete-item-inds') {
autocompleteDropdownInds.style.display = 'none';
}
});
</script>
<br>
<div class="row">
<div class="col-md-5">
<label for="schoolCollege" class="fw-normal fs-4">Board/University<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.school_college|attr:'required:true'|attr:'class:form-control'}}
{% if form.school_college.errors %}
<span class="alert-danger">Please enter Board/University</span>
{% endif %}
</div>
</div>
<br>
<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;
font-weight: normal;
}
.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="row">
<div class="col-md-5">
<label for="discipline" class="fw-normal fs-4">Discipline<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
<div class="autocomplete">
{{ form.discipline|attr:'required:true'|attr:'class:form-control'|attr:'onchange:OtherBox(this);'}}
<div id="autocomplete-dropdown" class="autocomplete-items"></div>
{{ form.other_discipline|attr:'class:form-control'|attr:'placeholder:Other Discipline'}}
<span class="alert-danger fw-normal fs-4" id="dicErr" style="display: none;"></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "{% url 'registrationForm:discipline-ajax'%}",
cache: false,
success: function (data) {
autocompleteData = data['disciplines'];
},
async: false,
});
});
// JavaScript
const inputField = document.getElementById('id_1-discipline');
const errorMessage = document.getElementById('dicErr');
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() {
populateAutocompleteOptions(inputField.value);
errorMessage.style.display = 'none';
});
// 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 Discipline';
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;
let select_input = $("#id_1-other_discipline");
if (selectedValue == "Others"){
select_input.attr("type", "text");
select_input.show();
select_input.attr("required","true");
}
else{
select_input.attr("type","hidden");
select_input.removeAttr("required");
select_input.val('');
}
errorMessage.style.display = 'none';
autocompleteDropdown.style.display = 'none';
}
});
window.addEventListener('click', function(event) {
if (event.srcElement.id === 'id_1-discipline'){
return false;
} else if (event.srcElement.className !== 'autocomplete-item') {
autocompleteDropdown.style.display = 'none';
}
});
</script>
<br>
<div class="row">
<div class="col-md-5">
<label for="startYear" class="fw-normal fs-4">Start Year<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.start_year|attr:'required:true'|attr:'class:form-control'|attr:'type:number'|attr:'onchange:StartEndYear(this);'}}
<span class="alert-danger fw-normal fs-4" id="startYearErr" style="display: none;"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-5">
<label for="endYear" class="fw-normal fs-4">End Year<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.completion_year|attr:'required:true'|attr:'class:form-control'|attr:'type:number'|attr:'onchange:StartEndYear(this);'}}
<span class="alert-danger fw-normal fs-4" id="endYearErr" style="display: none;"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-5">
<label for="percentCpga" class="fw-normal fs-4" data-toggle="tooltip" data-placement="top"
title="Enter your percentage or CGPA">Select % Marks or CGPA<span
class="text-danger">*</span></label>
</div>
<div class="col-md-6">
<input type="radio" id="percentMarks" name="marksOrCgpa" value="percent" checked>
<label for="percentMarks" class="fw-normal fs-4">Percentage</label>
<input type="radio" id="cgpa" name="marksOrCgpa" value="cgpa">
<label for="cgpa" class="fw-normal fs-4">CGPA</label>
<div class="row">
<div class="col-md-4">
{{ form.percentage_marks_cgpa|attr:'required:true'|attr:'class:form-control'}}
</div>
<div class="col-md-4" id="cpgaContainer">
{{ form.cpga_outoff | attr:'class:form-control' | attr:'placeholder:Out of' | attr:'type:number' | attr:'onchange:cgpaValidate(this)' }}
</div>
</div>
</div>
</div>
<br>
<div class="row justify-content-center" style="display: none;" id="eduErrRow">
<div class="col-12 text-center">
<div class="alert alert-danger" role="alert" id="eduErrContainer">
<p class="fw-normal" id="eduErr"></p>
</div>
</div>
</div>
</div>
<input type="hidden" value="" id="edit_rows">
<!-- Modal Footer -->
<div class="modal-footer justify-content-evenly">
<button type="button" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" onclick="closePopUp('edu')">Close</button>
<button type="submit" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" data-dismiss="modal" id="save_rec" name="Save" onclick="saveRec(event)">Save</button>
</div>
</div>
{% endif %}
{% if wizard.steps.current == '2' %}
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title fw-bolder fs-3" id="exampleModalLabel1">Add Employment Details</h4>
</div>
<!-- Modal Body -->
<div class="modal-body fw-bolder">
<div class="row">
<div class="col-md-5">
<label for="organization" class="fw-normal fs-4">Organization <span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.organization|attr:'required:true'|attr:'class:form-control' }}
{% if form.organization.errors %}
<span class="alert-danger">Please enter Organization</span>
{% endif %}
</div>
</div>
<br>
<div class="row">
<div class="col-md-5">
<label for="designations" class="fw-normal fs-4">Designations <span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.designations|attr:'required:true'|attr:'class:form-control'}}
{% if form.designations.errors %}
<span class="alert-danger">Please enter Designations</span>
{% endif %}
</div>
</div>
<br>
<div class="row">
<div class="col-md-5">
<label for="startDate" class="fw-normal fs-4">Start Date<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.start_date|attr:'required:true'|attr:'class:form-control'|attr:'type:date'|attr:'onchange:updateStartDate()'}}
{% if form.start_date.errors %}
<span class="alert-danger">Please select Start Date</span>
{% endif %}
</div>
</div>
<br>
<div class="row">
<div class="col-md-5">
<label for="endDate" class="fw-normal fs-4">End Date<span class="text-danger">*</span></label>
</div>
<div class="col-md-6">
{{ form.end_date|attr:'required:true'|attr:'class:form-control'|attr:'type:date'}}
{% if form.end_date.errors %}
<span class="alert-danger">Please select End Date</span>
{% endif %}
</div>
</div>
<br>
<div class="row justify-content-center" style="display: none;" id="empErrRow">
<div class="col-12 text-center">
<div class="alert alert-danger" role="alert" id="empErrContainer">
<p class="fw-normal" id="empErr"></p>
</div>
</div>
</div>
</div>
<input type="hidden" value="" id="edit_rows_exp">
<!-- Modal Footer -->
<div class="modal-footer justify-content-evenly">
<button type="button" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" onclick="closePopUp('emp')">Close</button>
<button type="submit" class="btn btn-rounded btn-primary btn-P fw-bold fs-4" data-dismiss="modal" id="save_rec_exp" name="Save" onclick="saveExpRec(event)">Save</button>
</div>
</div>
{% endif %}
</div>
</div>
</form>
Editor is loading...
Leave a Comment