You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
729 lines
27 KiB
729 lines
27 KiB
2 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>New Job Posting</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
width: 55rem;
|
||
|
|
margin: auto;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.three-col {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 0;
|
||
|
|
}
|
||
|
|
.three-col .col1,
|
||
|
|
.three-col .col2,
|
||
|
|
.three-col .col3,
|
||
|
|
.three-col .col4 {
|
||
|
|
flex: 0 0 22%;
|
||
|
|
}
|
||
|
|
.three-col .form-group {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.three-col input,
|
||
|
|
.three-col select {
|
||
|
|
width: calc(100% - 30px);
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
label.required::after {
|
||
|
|
content: "*";
|
||
|
|
color: red;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin-left: 180px;
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
#JobDescription {
|
||
|
|
width:380%;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 15px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
height: 70px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
#SpecialInstructions {
|
||
|
|
width:380%;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
#popup {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
#popup-content {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background-color: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.col4 .form-group {
|
||
|
|
margin-top: 165px;
|
||
|
|
margin-left: -40px;
|
||
|
|
}
|
||
|
|
#Location {
|
||
|
|
padding: 5px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
background-color: white;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#Location:focus {
|
||
|
|
border-color: #66afe9;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#Location option {
|
||
|
|
padding: 8px 10px;
|
||
|
|
}
|
||
|
|
.dropdown {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.dropdown-content {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
background-color: #F9F9F9;
|
||
|
|
min-width: 160px;
|
||
|
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||
|
|
z-index: 1;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.dropdown:hover .dropdown-content {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.dropdown-symbol::after {
|
||
|
|
content: "\25BE"; /* Unicode for down arrow */
|
||
|
|
position: absolute;
|
||
|
|
right: 30px;
|
||
|
|
top: 70%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
.popup {
|
||
|
|
display: none; /* Initially hidden */
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content {
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
width: 50%;
|
||
|
|
max-width: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content h2 {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content .form-group {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content .form-group label {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-content .form-group input,
|
||
|
|
.popup-content .form-group select,
|
||
|
|
.popup-content .form-group textarea {
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
.add a:hover p {
|
||
|
|
color: red; /* Change text color to red on hover */
|
||
|
|
}
|
||
|
|
.popup-content .form-group button {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup .close-btn {
|
||
|
|
cursor: pointer;
|
||
|
|
color: red;
|
||
|
|
font-weight: bold;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Centering elements within the popup */
|
||
|
|
.popup-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.add span a:hover {
|
||
|
|
background-color: red;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.refresh-button {
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 30px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left:-60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refresh-button:hover {
|
||
|
|
background-color: #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refresh-button svg {
|
||
|
|
width: 15px;
|
||
|
|
height: 15px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
/* The Modal (background) */
|
||
|
|
.modal {
|
||
|
|
display: none; /* Hidden by default */
|
||
|
|
position: fixed; /* Stay in place */
|
||
|
|
z-index: 1; /* Sit on top */
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%; /* Full width */
|
||
|
|
height: 100%; /* Full height */
|
||
|
|
overflow: auto; /* Enable scroll if needed */
|
||
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
||
|
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modal Content */
|
||
|
|
.modal-content {
|
||
|
|
background-color: #fefefe;
|
||
|
|
margin: 15% auto; /* 15% from the top and centered */
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #888;
|
||
|
|
width: 80%; /* Could be more or less, depending on screen size */
|
||
|
|
max-width: 600px; /* Maximum width */
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Close Button */
|
||
|
|
.close {
|
||
|
|
color: #aaa;
|
||
|
|
float: right;
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close:hover,
|
||
|
|
.close:focus {
|
||
|
|
color: black;
|
||
|
|
text-decoration: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.error-popup {
|
||
|
|
position: absolute;
|
||
|
|
background-color: red; /* Red background color */
|
||
|
|
color: white; /* Text color */
|
||
|
|
padding: 5px; /* Padding around the text */
|
||
|
|
border-radius: 5px; /* Rounded corners */
|
||
|
|
display: none; /* Initially hide the popup */
|
||
|
|
z-index: 1; /* Ensure it's above other elements */
|
||
|
|
margin-top:-440px;
|
||
|
|
margin-left:400px;
|
||
|
|
font-size:15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error-popup.show {
|
||
|
|
display: block; /* Show the popup when the 'show' class is added */
|
||
|
|
}
|
||
|
|
input.required:invalid {
|
||
|
|
border: 1px solid red;
|
||
|
|
}
|
||
|
|
|
||
|
|
input.required:invalid + .dropdown-symbol::after {
|
||
|
|
content: '*'; /* Display an asterisk to indicate required field */
|
||
|
|
color: red;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.back-button {
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
position: absolute;
|
||
|
|
top: 40px;
|
||
|
|
margin-left:-530px;
|
||
|
|
padding: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup {
|
||
|
|
|
||
|
|
left: 0%;
|
||
|
|
top: 10%;
|
||
|
|
|
||
|
|
}
|
||
|
|
.popup-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container" style="width:70%">
|
||
|
|
<form id="jobPostingForm" action="{% url 'save_job_posting' %}?admin_id={{ admin_id }}" method="post">
|
||
|
|
{% csrf_token %}
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<div class="three-col" style="margin-left:130px">
|
||
|
|
<div class="col1">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Client" class="required">Client:</label>
|
||
|
|
<select id="Client" name="Client" required style="width: 90%;" tabindex="1">
|
||
|
|
<option value="">Select Client</option>
|
||
|
|
{% for client in clients %}
|
||
|
|
<option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="button" id="refreshButton" class="refresh-button" onclick="refreshSPOCs()">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M17.65 6.35A7.95 7.95 0 0 0 12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8c3.93 0 7.18-2.86 7.87-6.65h-2.02c-.63 2.62-3.01 4.65-5.85 4.65-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.15.69 4.22 1.78l-2.5 2.5H20V4.5l-2.35 2.35z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="form-group" style="margin-top:-30px">
|
||
|
|
<label for="SPOC" class="required">SPOC:</label>
|
||
|
|
<select id="SPOC" name="SPOC" class="required" style="width: 90%;" tabindex="4">
|
||
|
|
<option value="" >Select SPOC</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="NoOfPosting" class="required">No of Posting:</label>
|
||
|
|
<input type="number" id="NoOfPosting" name="NoOfPosting" required tabindex="7" style="width: 90%;" onchange="validateDates()">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Experience" >Experience in Yrs:</label>
|
||
|
|
<input type="number" id="Experience" name="Experience" placeholder="3" style="width: 90%;" tabindex="11" oninput="validateBudget()" onblur="validateBudget()" min="00">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Qualification" class="required" >Qualification:</label>
|
||
|
|
<input type="text" id="Qualification" name="Qualification" required placeholder="msc" style="width: 90%;" tabindex="14">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="JobDescription" class="required">Job Description:</label>
|
||
|
|
<textarea id="JobDescription" name="JobDescription" required placeholder="" style="margin-top: -0px; width: 330%;" tabindex="16"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="SpecialInstructions" style="white-space: nowrap;">Special Instructions If any:</label>
|
||
|
|
<input type="text" id="SpecialInstructions" name="SpecialInstructions" placeholder="" style="width: 330%;" tabindex="17">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="file" class="required">Upload JD:</label>
|
||
|
|
<input type="file" id="JD" name="JD" required accept=".pdf,.doc,.docx" tabindex="18">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col2">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="JobID" class="required" style="margin-left: -10px; " >Job ID:</label>
|
||
|
|
<input type="text" id="JobID" name="JobID" required placeholder="" style="width: 90%; margin-left: -10px;" tabindex="2">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin-left: -10px;">
|
||
|
|
<label for="SPOC2" style="margin-left: 0px;">SPOC 2:</label>
|
||
|
|
<select id="SPOC2" name="SPOC2" style="width: 88%;" tabindex="5">
|
||
|
|
<option value="">Select SPOC 2</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="StartDate" class="required">Start Date:</label>
|
||
|
|
<input type="date" id="StartDate" name="StartDate" required tabindex="7" onchange="validateDates()">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="BudgetMin" >Budget Min Rs:</label>
|
||
|
|
<input type="number" id="BudgetMin" name="BudgetMin" placeholder="" style="width: 80%;" tabindex="12" oninput="validateBudget()" onblur="validateBudget()" min="00">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Header" class="required">Header:</label>
|
||
|
|
<input type="text" id="Header" name="Header" required placeholder="Ex.oracle Technical developer" style="width: 206%;" tabindex="15">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col3" style="width:100%">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="dropdown">
|
||
|
|
<label for="Location" class="required">Location:</label>
|
||
|
|
<div class="dropdown-symbol" onclick="toggleDropdown()" style="margin-top: 2px; margin-right: -30px;"></div>
|
||
|
|
<input type="text" id="selectedStatesInput" name="Location" required readonly style="margin-left: 5px; padding-right: 20px; width:150px;" tabindex="3">
|
||
|
|
<div class="dropdown-content" id="checkboxContainer" style="margin-left: 15px; display: none;">
|
||
|
|
<div id="checkboxItems">
|
||
|
|
<input type="checkbox" id="telanganaCheckbox" name="telanganaCheckbox" value="Telangana" onchange="updateInputField()" style="margin-left: -50px;">
|
||
|
|
<label for="telanganaCheckbox" style="margin-left: -50px;">Telangana</label><br>
|
||
|
|
<input type="checkbox" id="andhraCheckbox" name="andhraCheckbox" value="Andhra Pradesh" onchange="updateInputField()" style="margin-left: -50px;">
|
||
|
|
<label for="andhraCheckbox" style="margin-left: -50px;">Andhra Pradesh</label><br>
|
||
|
|
<input type="checkbox" id="gujaratCheckbox" name="gujaratCheckbox" value="Gujarat" onchange="updateInputField()" style="margin-left: -50px;">
|
||
|
|
<label for="gujaratCheckbox" style="margin-left: -50px;">Gujarat</label><br>
|
||
|
|
</div>
|
||
|
|
<input type="checkbox" id="OtherCheckbox" name="OtherCheckbox" value="Other" onchange="toggleOtherInputField()" style="margin-left: -50px;">
|
||
|
|
<label for="OtherCheckbox" style="margin-left: -50px;">Other</label><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button onclick="showAddLocationModal()" style="display: none;" id="saveButton">Save New Location</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="add" id="addSPOC" style="margin-left:-35px">
|
||
|
|
<a href="#" onclick="showPopup()">
|
||
|
|
<span class="circle"><i class="fas fa-plus" style="margin-top: 15px; margin-left:100px"></i></span>
|
||
|
|
<p style="margin-left: 80px; margin-top: -1px; color:black">Add SPOC</p>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="form-group" style="margin-top:20px;">
|
||
|
|
<label for="CloseDate" class="required">Close Date:</label>
|
||
|
|
<input type="date" id="CloseDate" name="CloseDate" required tabindex="8" onchange="validateDates()">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="BudgetMax" >Budget Max Rs:</label>
|
||
|
|
<input type="number" id="BudgetMax" name="BudgetMax" placeholder="" style="width: 85%;" tabindex="13" oninput="validateBudget()" onblur="validateBudget()" pattern="\d{1,20}">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col4">
|
||
|
|
<div></div>
|
||
|
|
<div></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<button type="button" onclick="saveJobPosting()" style="border-radius: 5px; background-color:lightgreen; width: 70px; margin-left: 450px; margin-top: -20px; padding: 5px;">Save</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div id="budgetMaxErrorPopup" class="error-popup">
|
||
|
|
Budget Max must be greater than Budget Min.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="popup" id="addContactPopup" style="width: 100%; font-size:14px; margin-top:-50px;">
|
||
|
|
<div class="popup-content">
|
||
|
|
<span class="close-btn" onclick="hidePopup()"></span>
|
||
|
|
<button type="button" onclick="goBack()" class="back-button">
|
||
|
|
<i class="fas fa-arrow-left" style="font-size: 22px;" ></i>
|
||
|
|
</button>
|
||
|
|
<h3>Add SPOC</h3>
|
||
|
|
<form id="AddSPOCform" method="post" action="{% url 'add_contact' %}?admin_id={{ admin_id }}">
|
||
|
|
{% csrf_token %}
|
||
|
|
<div class="form-group" >
|
||
|
|
<label for="ClientDropdown" class="required"><b>Company:</b></label>
|
||
|
|
<select id="ClientDropdown" name="Company" required tabindex="1">
|
||
|
|
<option value="">Select Company</option>
|
||
|
|
{% for client in clients %}
|
||
|
|
<option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="SubClientDropdown"><b>Sub Company:</b></label>
|
||
|
|
<select id="SubClientDropdown" name="Sub_Company" tabindex="2">
|
||
|
|
<option value="">Select Sub Company</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="FirstName" class="required"><b>FirstName:</b></label>
|
||
|
|
<input type="text" id="FirstName" name="FirstName" style="height: 40px;" required placeholder="Eg.Srinivas" tabindex="3">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="LastName" class="required"><b>LastName:</b></label>
|
||
|
|
<input type="text" id="LastName" name="LastName" required placeholder="Eg. lavisetty" tabindex="4">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Department" class="required"><b>Department:</b></label>
|
||
|
|
<select id="Department" name="Department" required tabindex="5" onchange="checkForOtherOption()">
|
||
|
|
<option value="">Select Department</option>
|
||
|
|
<option value="HIRING MANAGERS">HIRING MANAGER</option>
|
||
|
|
<option value="ACCOUNT DEPARTMENT">ACCOUNT DEPARTMENT</option>
|
||
|
|
<option value="HUMAN RESOURCES">HUMAN RESOURCES</option>
|
||
|
|
<option value="ADMINISTRATION AND LEGAL">ADMINISTRATION AND LEGAL</option>
|
||
|
|
<option value="Other">Other</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Designation" class="required"><b>Designation:</b></label>
|
||
|
|
<input id="Designation" name="Designation" placeholder="Eg. Manager" required tabindex="6">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Email" class="required"><b>Email Id:</b></label>
|
||
|
|
<input type="email" id="Email" name="Email" required placeholder="arminta@123gmail.com" tabindex="7">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="Phone_number" class="required"><b>Phone No:</b></label>
|
||
|
|
<input type="text" id="Phone_number" name="Phone_number" required pattern="^(?!0{10})[6-9]\d{9}$" placeholder="9618984213" maxlength="10" tabindex="8">
|
||
|
|
</div>
|
||
|
|
<button type="button" onclick="saveAdd_SPOC()">Save</button>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="popup" id="successPopup" style="display: none;">
|
||
|
|
<div class="popup-content">
|
||
|
|
<span class="close-btn" onclick="hideSuccessPopup()"></span>
|
||
|
|
<h3> SPOC saved successfully!</h3>
|
||
|
|
<button onclick="hideSuccessPopup()">OK</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="addLocationModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid #ccc; box-shadow:0 0 10px rgba(0,0,0,0.1);">
|
||
|
|
<label for="newLocationInput">Enter New Location:</label>
|
||
|
|
<input type="text" id="newLocationInput" style="margin:10px 0;">
|
||
|
|
<button onclick="saveNewLocation()">Save</button>
|
||
|
|
<button onclick="closeAddLocationModal()">Cancel</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function showPopup() {
|
||
|
|
document.getElementById('addContactPopup').style.display = 'flex';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to hide the popup
|
||
|
|
function hidePopup() {
|
||
|
|
document.getElementById('addContactPopup').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to handle form submission inside the popup (to be implemented)
|
||
|
|
function saveAddNewContact() {
|
||
|
|
// Add your form submission logic here
|
||
|
|
alert('New contact saved!');
|
||
|
|
hidePopup(); // Hide the popup after saving
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function validateDates() {
|
||
|
|
var startDate = new Date(document.getElementById("StartDate").value);
|
||
|
|
var closeDate = new Date(document.getElementById("CloseDate").value);
|
||
|
|
|
||
|
|
if (closeDate <= startDate) {
|
||
|
|
alert("Close Date must be greater than Start Date.");
|
||
|
|
document.getElementById("CloseDate").value = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to toggle the display of the dropdown content
|
||
|
|
function toggleDropdown() {
|
||
|
|
var checkboxContainer = document.getElementById("checkboxContainer");
|
||
|
|
if (checkboxContainer.style.display === "none" || checkboxContainer.style.display === "") {
|
||
|
|
checkboxContainer.style.display = "block";
|
||
|
|
} else {
|
||
|
|
checkboxContainer.style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to update the input field with selected states
|
||
|
|
function updateInputField() {
|
||
|
|
var checkboxes = document.querySelectorAll('#checkboxContainer input[type="checkbox"]');
|
||
|
|
var selectedStates = [];
|
||
|
|
checkboxes.forEach(function(checkbox) {
|
||
|
|
if (checkbox.checked) {
|
||
|
|
selectedStates.push(checkbox.value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.getElementById("selectedStatesInput").value = selectedStates.join(", ");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to toggle the input field if 'Other' is checked
|
||
|
|
function toggleOtherInputField() {
|
||
|
|
var otherCheckbox = document.getElementById("OtherCheckbox");
|
||
|
|
if (otherCheckbox.checked) {
|
||
|
|
var otherLocation = prompt("Please enter the other location:");
|
||
|
|
if (otherLocation) {
|
||
|
|
otherCheckbox.value = otherLocation;
|
||
|
|
updateInputField();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
updateInputField();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function showPopup() {
|
||
|
|
document.getElementById('addContactPopup').style.display = 'flex';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to hide the popup
|
||
|
|
function hidePopup() {
|
||
|
|
document.getElementById('addContactPopup').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to handle form submission inside the popup (to be implemented)
|
||
|
|
function saveAddNewContact() {
|
||
|
|
// Add your form submission logic here
|
||
|
|
alert('New contact saved!');
|
||
|
|
hidePopup(); // Hide the popup after saving
|
||
|
|
}
|
||
|
|
|
||
|
|
// Function to validate the job posting form (to be implemented)
|
||
|
|
function saveJobPosting() {
|
||
|
|
// Add your form validation and submission logic here
|
||
|
|
alert('Job posting saved!');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function validateDates() {
|
||
|
|
var startDate = new Date(document.getElementById("StartDate").value);
|
||
|
|
var closeDate = new Date(document.getElementById("CloseDate").value);
|
||
|
|
|
||
|
|
if (closeDate <= startDate) {
|
||
|
|
alert("Close Date must be greater than Start Date.");
|
||
|
|
document.getElementById("CloseDate").value = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function validateBudget() {
|
||
|
|
var budgetMin = parseInt(document.getElementById("BudgetMin").value);
|
||
|
|
var budgetMax = parseInt(document.getElementById("BudgetMax").value);
|
||
|
|
var budgetMaxInput = document.getElementById("BudgetMax");
|
||
|
|
var errorPopup = document.getElementById("budgetMaxErrorPopup");
|
||
|
|
|
||
|
|
if (budgetMax <= budgetMin) {
|
||
|
|
// Show the error popup
|
||
|
|
errorPopup.classList.add("show");
|
||
|
|
// Position the error popup near the input field
|
||
|
|
var rect = budgetMaxInput.getBoundingClientRect();
|
||
|
|
errorPopup.style.top = (rect.top + window.scrollY - errorPopup.offsetHeight - 10) + "px";
|
||
|
|
errorPopup.style.left = (rect.left + window.scrollX) + "px";
|
||
|
|
|
||
|
|
budgetMaxInput.focus(); // Focus back on Budget Max for correction
|
||
|
|
} else {
|
||
|
|
// Hide the error popup
|
||
|
|
errorPopup.classList.remove("show");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Attach the validation function to the input events
|
||
|
|
document.getElementById("BudgetMax").addEventListener("input", validateBudget);
|
||
|
|
document.getElementById("BudgetMax").addEventListener("blur", validateBudget);
|
||
|
|
document.getElementById("BudgetMin").addEventListener("input", validateBudget);
|
||
|
|
document.getElementById("BudgetMin").addEventListener("blur", validateBudget);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function updateInputField() {
|
||
|
|
var selectedStatesInput = document.getElementById("selectedStatesInput");
|
||
|
|
var selectedStates = [];
|
||
|
|
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
|
||
|
|
for (var i = 0; i < checkboxes.length; i++) {
|
||
|
|
selectedStates.push(checkboxes[i].value);
|
||
|
|
}
|
||
|
|
selectedStatesInput.value = selectedStates.join(", ");
|
||
|
|
// Close the dropdown after updating the input field
|
||
|
|
var dropdownContent = document.getElementById("checkboxContainer");
|
||
|
|
dropdownContent.style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleOtherInputField() {
|
||
|
|
var otherCheckbox = document.getElementById("OtherCheckbox");
|
||
|
|
var selectedStatesInput = document.getElementById("selectedStatesInput");
|
||
|
|
var dropdownContent = document.getElementById("checkboxContainer");
|
||
|
|
if (otherCheckbox.checked) {
|
||
|
|
// If "Other" is checked, make the input field editable and hide dropdown content
|
||
|
|
selectedStatesInput.readOnly = false;
|
||
|
|
selectedStatesInput.focus();
|
||
|
|
dropdownContent.style.display = "none";
|
||
|
|
} else {
|
||
|
|
// If "Other" is unchecked, clear the input field, make it readonly again, and show dropdown content
|
||
|
|
selectedStatesInput.value = "";
|
||
|
|
selectedStatesInput.readOnly = true;
|
||
|
|
dropdownContent.style.display = "block";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleDropdown() {
|
||
|
|
var dropdownContent = document.getElementById("checkboxContainer");
|
||
|
|
if (dropdownContent.style.display === "none") {
|
||
|
|
dropdownContent.style.display = "block";
|
||
|
|
} else {
|
||
|
|
dropdownContent.style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function validateLocationSelection() {
|
||
|
|
var selectedStatesInput = document.getElementById("selectedStatesInput");
|
||
|
|
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
|
||
|
|
|
||
|
|
if (checkboxes.length === 0 && !selectedStatesInput.readOnly) {
|
||
|
|
// No checkboxes are checked and the input is not readonly (not "Other" selected)
|
||
|
|
selectedStatesInput.setCustomValidity("Please select at least one location.");
|
||
|
|
selectedStatesInput.reportValidity();
|
||
|
|
return false; // Validation failed
|
||
|
|
} else {
|
||
|
|
// Reset custom validity if valid
|
||
|
|
selectedStatesInput.setCustomValidity("");
|
||
|
|
return true; // Validation passed
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hook up validation function to form submission
|
||
|
|
document.getElementById("jobPostingForm").addEventListener("submit", function(event) {
|
||
|
|
if (!validateLocationSelection()) {
|
||
|
|
event.preventDefault(); // Prevent form submission if validation fails
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|