<!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> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> .Admin_client{ body { font-family: Arial, sans-serif; } .container { width: 45rem; margin: auto; padding: 20px; border-radius: 10px; overflow: hidden; } .two-col { display: flex; white-space: nowrap; } .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; } h1 { text-align: center; } .footer { display: flex; justify-content: space-between; margin-top: 20px; } .form-group { display: flex; flex-direction: row-reverse; align-items: center; } .form-group label { margin-left: 10px; } #Address { margin-left: 40px; height: 20px; 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-sublocation-link { display: inline-flex; /* Use inline-flex to keep the link inline */ align-items: center; /* Vertically center the icon and text */ text-decoration: none; /* Remove underline */ color: black; /* Text color */ margin: 600; } .sublocation-icon { margin-right: 7px; margin-top:-200px;/* Space between the icon and the text */ } .sublocation-text { margin-left:-90px; margin-top:-150px; } .container1 input[type="text"] { width: calc(100% - 20px); margin-right: 10px; } <!-- .add span {--> <!-- display: inline-block;--> <!-- width: 25px;--> <!-- height: 25px;--> <!-- border: 2px solid black; /* Add border property */--> <!-- border-radius: 50%;--> <!-- text-align: center;--> <!-- line-height: 30px;--> <!-- margin-left: 530px;--> <!-- color: black;--> <!-- }--> h3 { text-decoration: underline; margin-left:30px; }} </style> </head> <body> <div class="Admin_client"> <div class="container" style="width:200%; margin-left:255px;"> <form id="addClientForm" action="{% url 'save_details' %}?admin_id={{ admin_id }}" method="post" style="width:100%;"> {% csrf_token %} <div class="two-col"> <div class="col1" style="width:15%;"> <div class="form-group"> <input type="text" id="ParentCompany" name="ParentCompany" placeholder="Eg. Oracle in India" tabindex="1" style="margin-left:7px" required autocomplete="off"> <label for="ParentCompany" class="required" style="width: 200px;"><b>Parent Company:</b></label> </div> <div class="form-group" style="margin-left:-60px"> <input type="text" id="Location_Id" name="Location_Id" style="margin-left:44px" placeholder="Eg. Hyderabad" tabindex="3" required autocomplete="off"> <label for="Location_Id" class="required" style="margin-left: 70px;"><b>Location_Id:</b></label> </div> <div class="form-group" style="margin-left:30px"> <input type="text" id="Address_2" name="Address_2" placeholder="optional" style="margin-left:63px;" tabindex="5" autocomplete="off"> <label for="Address_2" style="margin-left: -22px;"><b>Address_2:</b></label> </div> <div class="form-group"> <select id="State" name="State" style="margin-left: 93px;" tabindex="8" required> <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: 8px;"><b>State:</b></label> </div> <div class="form-group"> <input type="text" id="country" name="country" value="India" placeholder="Country" style="margin-left: 68px;" tabindex="10" required> <label for="country" class="required" style="margin-left: 9px;"><b>Country:</b></label> </div> </div> <div class="col2" style="width:15%"> <div class="form-group"> <input type="text" id="GSTNo" name="GSTNo" style="margin-left: 30px;" placeholder="Eg. LSB009876L1" tabindex="2" pattern="[A-Z0-9]{15}" oninput="this.value = this.value.toUpperCase()" required autocomplete="off"> <label for="GSTNo" class="required" style="margin-left: 15px;"><b>GST No:</b></label> </div> <div class="form-group"> <input type="text" id="Address_1" name="Address_1" style="margin-left: 10px;" placeholder="Address_1" tabindex="4" required autocomplete="off"> <label for="Address_1" class="required" style="margin-left: 15px;"><b>Address_1:</b></label> </div> <div class="form-group"> <input type="text" id="City" name="City" placeholder="City" style="margin-left:60px;" tabindex="7" required autocomplete="off"> <label for="City" class="required" style="margin-left: 15px;"><b>City:</b></label> </div> <div class="form-group"> <input type="number" id="Pincode" name="Pincode" placeholder="500090" tabindex="9" style="margin-left: 30px;" required autocomplete="off" maxlength="6" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);" pattern="\d{6}"> <label for="Pincode" class="required" style="margin-left: 15px;"><b>Pincode:</b></label> </div> </div> </div> <button type="button" id="saveButton" onclick="saveClient()" tabindex="10" style="border-radius: 5px; background-color:lightgreen; width: 100px; margin-left:380px; margin-top: 10px; padding: 5px;">Save</button> </form> <span id="ResultMessage"></span> <div class="add" id="addSubLocation" style="margin-left:600px;"> <a href="#" onclick="toggleaddSubLocation()" class="add-sublocation-link"> <svg class="sublocation-icon" width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="black" stroke-width="2" fill="none"/> <line x1="12" y1="7" x2="12" y2="17" stroke="black" stroke-width="2"/> <line x1="7" y1="12" x2="17" y2="12" stroke="black" stroke-width="2"/> </svg> <span class="sublocation-text" tabindex="12">Add New sub location</span> </a> </div> <div id="subClientLocationsForm" > <form id="subLocationsForm" style="display: none; width:200%;" action="{% url 'save_sublocation' %}?admin_id={{ admin_id }}" method="post"> {% csrf_token %} <div class="two-col" > <div class="col1" style="width:7.5%;"> <div class="form-group"> <select id="ParentCompany" name="ParentCompany" required tabindex="1"> <option value="">Select Client</option> </select> <label for="ParentCompany" class="required" style="width: 200px;"><b>Parent Company:</b></label> </div> <div class="form-group"> <input type="text" id="Department" name="Department" style="margin-left: 40px;" required placeholder="Eg. Billing or Accouts or Hiring" tabindex="3"> <label for="Department" class="required" style="margin-left: 10px;"><b>Department:</b></label> </div> <div class="form-group"> <input type="text" id="Address_1" name="Address_1" style="margin-left: 48px;" required placeholder="Address_1" tabindex="5"> <label for="Address_1" class="required" style="margin-left: 10px;"><b>Address_1:</b></label> </div> <div class="form-group" style="margin-left:-18px"> <input type="text" id="City" name="City" style="margin-left: 95px;" required placeholder="City" tabindex="7"> <label for="City" class="required" style="margin-left: 28px;"><b>City:</b></label> </div> <div class="form-group" style="margin-left:-20px"> <input type="number" id="Pincode" name="Pincode" style="margin-left: 65px;" required placeholder="500090" tabindex="9" oninput="if(this.value.length > 6) this.value = this.value.slice(0, 6);"> <label for="Pincode" class="required" style="margin-left: 28px;"><b>Pincode:</b></label> </div> </div> <div class="col2" style="width:7.5%;"> <div class="form-group"> <input type="text" id="GSTNo" name="GSTNo" required placeholder="Eg. LSB009876L1" tabindex="2" style="margin-left: 20px;" pattern="[A-Z0-9]{15}" oninput="this.value = this.value.toUpperCase()"> <label for="GSTNo" class="required" style="margin-left: 10px;"><b>GST No.</b></label> </div> <div class="form-group" style="margin-left:-60px"> <input type="text" id="Location" name="Location" required placeholder="Eg. bangalore"tabindex="4" style="margin-left: 13px;"> <label for="Location" class="required" style="margin-left: 70px;"><b>Location:</b></label> </div> <div class="form-group" style="margin-left:-15px"> <input type="text" id="Address_2" name="Address_2" placeholder="optional" style="margin-left: 10px;" tabindex="6"> <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" required tabindex="8" style="margin-left: 37px;"> <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:-20px"> <input type="text" id="country" name="country" value="India" style="margin-left: 20px;"required placeholder="country" tabindex="10"> <label for="country" class="required" style="margin-left: 35px;"><b>country:</b></label> </div> </div> </div> <button type="button" onclick="saveSubLocation()" tabindex="11" style="border-radius: 5px; background-color:lightgreen; width: 100px; margin-left:380px; margin-top: 10px; padding: 5px; "> Save</button> </form> </div> </div> </div> <script> function toggleaddSubLocation() { var mainForm = document.getElementById("addClientForm"); var subForm = document.getElementById("subLocationsForm"); var addButton = document.getElementById("addSubLocation"); mainForm.style.display = "none"; subForm.style.display = "block"; addButton.style.display = "none"; } function saveClient() { const form = document.getElementById('addClientForm'); const inputs = form.querySelectorAll('input[required], select[required]'); const formData = new FormData(form); // Ensure this retrieves the correct URL const url = form.getAttribute('action'); console.log('CSRF Token:', '{{ csrf_token }}'); console.log('Form action URL:', url); 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('Parent company already exit.'); }); } function saveSubLocation() { const form = document.getElementById('subLocationsForm'); 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 => { return response.json().then(data => { if (!response.ok) { // Handle specific error messages if (data.message) { throw new Error(data.message); } } return data; }); }) .then(data => { console.log('Success:', data); alert('Sub_Location saved successfully.'); }) .catch(error => { console.error('Error:', error); alert('Error:' + error.message); }) .finally(() => { // Clear all fields in the form whether success or error form.reset(); }); } </script> </body> </html>