<!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>