|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
.addSubclient{
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
width: 65rem;
|
|
|
|
|
margin: auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.two-col {
|
|
|
|
|
display: flex;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
margin-left: 100px;
|
|
|
|
|
}
|
|
|
|
|
.three-col .col1,
|
|
|
|
|
.three-col .col2 {
|
|
|
|
|
flex: 0 0 22%;
|
|
|
|
|
}
|
|
|
|
|
.two-col .form-group {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
.two-col input,
|
|
|
|
|
.two-col select {
|
|
|
|
|
width: calc(100% - 50px);
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
}
|
|
|
|
|
label.required::after {
|
|
|
|
|
content: "*";
|
|
|
|
|
color: red;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
}
|
|
|
|
|
.form-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.form-group label {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
#Address {
|
|
|
|
|
margin-left: 40px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
ul {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
margin-left: 300px;
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
float:left;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
margin-left: -10px;
|
|
|
|
|
}
|
|
|
|
|
li a {
|
|
|
|
|
display: block;
|
|
|
|
|
color: black;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 1px;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-left: 60px;
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
|
|
|
|
color:red;
|
|
|
|
|
}
|
|
|
|
|
.container1 {
|
|
|
|
|
margin-left: 500px;
|
|
|
|
|
width: 900px;
|
|
|
|
|
}
|
|
|
|
|
.add p {
|
|
|
|
|
margin-left: 370px;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
}
|
|
|
|
|
.add a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
.container1 input[type="text"] {
|
|
|
|
|
width: calc(100% - 20px);
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
.add span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 25px;
|
|
|
|
|
height: 25px;
|
|
|
|
|
border: 2px solid black;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
margin-left: 430px;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
#jobPostingForm1{
|
|
|
|
|
margin-left: -130px;
|
|
|
|
|
}
|
|
|
|
|
#jobPostingForm{
|
|
|
|
|
margin-left: -130px;
|
|
|
|
|
}
|
|
|
|
|
.container1 .col2 {
|
|
|
|
|
margin-top: -1px;
|
|
|
|
|
#ParentCompany{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="addSubclient">
|
|
|
|
|
<div class="container" style="width:200%; margin-left:210px;">
|
|
|
|
|
<form id="addSubClientForm" action="{% url 'save-details-subcompany' %}?admin_id={{ admin_id }}" method="post">
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
<div class="two-col" style="width:70%; margin-left:100px;">
|
|
|
|
|
<div class="col1" style="width:18%;">
|
|
|
|
|
<div class="form-group" style="margin-left:40px" >
|
|
|
|
|
<select id="ParentCompany" name="ParentCompany" required tabindex="1" style="margin-left:-65px">
|
|
|
|
|
<option value="" tabindex="1" style="margin-left:-55px;, width: 100px">Select Client</option>
|
|
|
|
|
|
|
|
|
|
{% for client in clients %}
|
|
|
|
|
<option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</select>
|
|
|
|
|
<label for="ParentCompany" class="required" style="width: 200px; margin-left:-650px;"><b>Parent Company:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group" style="position: relative; width: 380px;">
|
|
|
|
|
<input type="text" id="GSTNo" name="GSTNo" style="width: 100%; padding-right: 60px;" placeholder="Parent_GST default" tabindex="3" oninput="this.value = this.value.toUpperCase()" disabled>
|
|
|
|
|
<label for="GSTNo" style="width: 200px; margin-left:-48px;"><b>Parent_GST No.</b></label>
|
|
|
|
|
<button type="button" id="changeButton" onclick="changeGST()" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);">Change</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group" style="margin-left:">
|
|
|
|
|
<input type="text" id="Address_1" name="Address_1" required placeholder="Address_1" tabindex="5" style= margin-left:-36px;">
|
|
|
|
|
<label for="Address_1" class="required" style="width: 200px; margin-left:-50px;"><b>Address_1:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group" >
|
|
|
|
|
<input type="text" id="City" name="City" required placeholder="City" tabindex="7" style= margin-left:-36px;">
|
|
|
|
|
<label for="City" class="required" style="width: 200px; margin-left:-50px;"><b>City:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input type="number" id="Pincode" name="Pincode" required placeholder="500090" tabindex="9" style="margin-left:-36px" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);" pattern="\d{6}">
|
|
|
|
|
<label for="Pincode" class="required" style="width: 200px; margin-left:-50px;"><b>Pincode:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col2" style="width:20%">
|
|
|
|
|
<div class="form-group" >
|
|
|
|
|
<input type="text" id="SubCompany" name="SubCompany" style=" margin-left:1px; overflow-wrap: break-word;" required placeholder="Eg. oracle India" tabindex="2">
|
|
|
|
|
<label for="SubCompany" class="required" style="margin-left: 15px;"><b>Sub Company</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group" style="margin-left:-60px">
|
|
|
|
|
<input type="text" id="Location_Id" name="Location_Id" required placeholder="Eg. bangalore" tabindex="4" style= margin-left:12px;" >
|
|
|
|
|
<label for="Location_Id" class="required" style="margin-left: 75px;"><b>Location_Id:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group" style="margin-left:-15px">
|
|
|
|
|
<input type="text" id="Address_2" name="Address_2" placeholder="optional" tabindex="6" style="margin-left: 33px;">
|
|
|
|
|
<label for="Address_2" style="margin-left: 28px;"><b>Address_2:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group" style="margin-left:-15px">
|
|
|
|
|
<select id="State" name="State" style="margin-left: 65px;" required tabindex="8">
|
|
|
|
|
<option value="" selected disabled>Select State</option>
|
|
|
|
|
<option value="Andhra Pradesh">Andhra Pradesh</option>
|
|
|
|
|
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
|
|
|
|
|
<option value="Assam">Assam</option>
|
|
|
|
|
<option value="Bihar">Bihar</option>
|
|
|
|
|
<option value="Chhattisgarh">Chhattisgarh</option>
|
|
|
|
|
<option value="Goa">Goa</option>
|
|
|
|
|
<option value="Gujarat">Gujarat</option>
|
|
|
|
|
<option value="Haryana">Haryana</option>
|
|
|
|
|
<option value="Himachal Pradesh">Himachal Pradesh</option>
|
|
|
|
|
<option value="Jharkhand">Jharkhand</option>
|
|
|
|
|
<option value="Karnataka">Karnataka</option>
|
|
|
|
|
<option value="Kerala">Kerala</option>
|
|
|
|
|
<option value="Madhya Pradesh">Madhya Pradesh</option>
|
|
|
|
|
<option value="Maharashtra">Maharashtra</option>
|
|
|
|
|
<option value="Manipur">Manipur</option>
|
|
|
|
|
<option value="Meghalaya">Meghalaya</option>
|
|
|
|
|
<option value="Mizoram">Mizoram</option>
|
|
|
|
|
<option value="Nagaland">Nagaland</option>
|
|
|
|
|
<option value="Odisha">Odisha</option>
|
|
|
|
|
<option value="Punjab">Punjab</option>
|
|
|
|
|
<option value="Rajasthan">Rajasthan</option>
|
|
|
|
|
<option value="Sikkim">Sikkim</option>
|
|
|
|
|
<option value="Tamil Nadu">Tamil Nadu</option>
|
|
|
|
|
<option value="Telangana">Telangana</option>
|
|
|
|
|
<option value="Tripura">Tripura</option>
|
|
|
|
|
<option value="Uttar Pradesh">Uttar Pradesh</option>
|
|
|
|
|
<option value="Uttarakhand">Uttarakhand</option>
|
|
|
|
|
<option value="West Bengal">West Bengal</option>
|
|
|
|
|
</select>
|
|
|
|
|
<label for="State" class="required" style="margin-left: 28px;"><b>State:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group" style="margin-left:-10px">
|
|
|
|
|
<input type="text" id="country" name="country" style="margin-left: 40px;" required placeholder="country" value="India" tabindex="10">
|
|
|
|
|
<label for="country" class="required" style="margin-left: 25px;"><b>Country:</b></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button type="button" onclick="saveSubClient()" tabindex="11" style="border-radius: 5px; background-color:lightgreen; width: 100px; margin-left:400px; margin-top: 10px; padding: 5px; "> Save</button> </form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
var form = document.getElementById('secondForm');
|
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
|
|
|
e.preventDefault(); // Prevent the default form submission
|
|
|
|
|
|
|
|
|
|
var formData = new FormData(form);
|
|
|
|
|
|
|
|
|
|
// AJAX request to the server
|
|
|
|
|
fetch("{% url 'save-details-subcompany' %}", {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData,
|
|
|
|
|
headers: {
|
|
|
|
|
'X-CSRFToken': formData.get('csrfmiddlewaretoken') // Include CSRF token
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
console.log(data.message); // Log the success message
|
|
|
|
|
document.getElementById('successMessage').style.display = 'block'; // Show success message
|
|
|
|
|
form.reset(); // Reset the form fields
|
|
|
|
|
})
|
|
|
|
|
.catch(error => console.error('Error:', error));
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function saveSubClient() {
|
|
|
|
|
const form = document.getElementById('addSubClientForm');
|
|
|
|
|
const requiredFields = form.querySelectorAll('input[required], select[required]');
|
|
|
|
|
|
|
|
|
|
let isValid = true;
|
|
|
|
|
|
|
|
|
|
// Clear any previous custom validation messages and reset border colors
|
|
|
|
|
requiredFields.forEach(field => {
|
|
|
|
|
field.setCustomValidity(''); // Clear previous validation message
|
|
|
|
|
field.style.borderColor = ''; // Reset border color
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Iterate over each required field to check if it has value
|
|
|
|
|
for (let field of requiredFields) {
|
|
|
|
|
if (!field.value.trim()) {
|
|
|
|
|
isValid = false;
|
|
|
|
|
|
|
|
|
|
// Highlight the empty field with a red border
|
|
|
|
|
field.style.borderColor = '';
|
|
|
|
|
|
|
|
|
|
// Set a custom validation message
|
|
|
|
|
field.setCustomValidity('Please fill out this field.');
|
|
|
|
|
|
|
|
|
|
// Show the validation message for this field
|
|
|
|
|
field.reportValidity();
|
|
|
|
|
|
|
|
|
|
// Focus the first invalid field
|
|
|
|
|
field.focus();
|
|
|
|
|
|
|
|
|
|
// Exit the loop after finding the first invalid field
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!isValid) {
|
|
|
|
|
// Prevent form submission if validation fails
|
|
|
|
|
console.log("Validation failed. Please fill out the required fields.");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Proceed with saving data if all fields are valid
|
|
|
|
|
const formData = new FormData(form);
|
|
|
|
|
const url = form.getAttribute('action');
|
|
|
|
|
|
|
|
|
|
console.log("Submitting form to:", url);
|
|
|
|
|
console.log("Form data:", [...formData.entries()]); // Log the form data
|
|
|
|
|
|
|
|
|
|
fetch(url, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData,
|
|
|
|
|
headers: {
|
|
|
|
|
'X-CSRFToken': '{{ csrf_token }}', // Assuming you have CSRF token available
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
.then(response => {
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error('Network response was not ok');
|
|
|
|
|
}
|
|
|
|
|
return response.json();
|
|
|
|
|
})
|
|
|
|
|
.then(data => {
|
|
|
|
|
console.log('Success:', data);
|
|
|
|
|
alert('Client saved successfully.');
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
alert('An error occurred while saving the job posting.');
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
