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.
240 lines
11 KiB
240 lines
11 KiB
2 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>SubClient Form</title>
|
||
|
|
<style>
|
||
|
|
.AddContact {
|
||
|
|
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;
|
||
|
|
|
||
|
|
}
|
||
|
|
.col1, .col2 {
|
||
|
|
flex: 0 0 50%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.form-group input, .form-group select {
|
||
|
|
width: calc(100% - 100px);
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
border: 1px solid black;
|
||
|
|
}
|
||
|
|
label.required::after {
|
||
|
|
content: "*";
|
||
|
|
color: red;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.form-group label {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.error-message {
|
||
|
|
color: red;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
border-color: red;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: lightgreen;
|
||
|
|
width: 100px;
|
||
|
|
margin-left: 400px;
|
||
|
|
margin-top: 10px;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="AddContact">
|
||
|
|
<div class="container" style="width:60%; margin-left:230px;">
|
||
|
|
<form id="Add_new_contact" action="{% url 'add_contact' %}?admin_id={{ admin_id }}" method="post">
|
||
|
|
{% csrf_token %}
|
||
|
|
<div class="two-col" style="margin-left:50px">
|
||
|
|
<div class="col1">
|
||
|
|
<div class="form-group">
|
||
|
|
<select id="ClientDropdown" name="Company" required tabindex="1" style="margin-left:30px;">
|
||
|
|
<option value="">Select Company</option>
|
||
|
|
{% for client in clients %}
|
||
|
|
<option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
<label for="ClientDropdown" class="required" style="margin-left:-63px"><b>Company:</b></label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin-left:-0px">
|
||
|
|
<input type="text" id="FirstName" name="FirstName" style="margin-left:23px;" required placeholder="Eg.srinivas" tabindex="3">
|
||
|
|
<label for="FirstName" class="required" style="margin-left:-65px"><b>First Name:</b></label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input id="Designation" name="Designation" placeholder="Eg. Manager" required tabindex="5" style="margin-left:20px">
|
||
|
|
<label for="Designation" class="required" style="margin-left:-65px"><b>Designation</b></label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin-left:px">
|
||
|
|
<input type="Email" id="Email" name="Email" style="margin-left:40px" required placeholder="arminta@123gmail.com" tabindex="7">
|
||
|
|
<label for="Email" class="required" style="margin-left:-50px"><b>Email_Id:</b></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col2" style="margin-left:5px">
|
||
|
|
<div class="form-group">
|
||
|
|
<input id="SubClientDropdown" name="Sub_Company" placeholder="Select Sub Company" tabindex="2" style="margin-left:10px;" disabled>
|
||
|
|
<label for="SubClientDropdown"><b>Sub Company:</b></label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="LastName" name="LastName" style="margin-left:35px;" placeholder="Eg. Reddy" tabindex="4">
|
||
|
|
<label for="LastName" ><b>Last Name:</b></label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<select id="Department" name="Department" required tabindex="5" style="margin-left:15px" onchange="checkForOtherOption()"><option value="">Select Department</option>
|
||
|
|
<option value="HIRING MANAGERS">Talent Acquisition</option>
|
||
|
|
<option value="ACCOUNTS DEPARTMENT">Accounts Department</option>
|
||
|
|
<option value="HUMAN RESOURCES">Human Resources</option>
|
||
|
|
<option value="ADMINISTRATION AND LEGAL">Administration And Legal</option>
|
||
|
|
<option value="Business Development">Business Development</option>
|
||
|
|
|
||
|
|
<option value="Other">Other</option>
|
||
|
|
</select>
|
||
|
|
<label for="Department" class="required" style="margin-left:10px"><b>Department:</b></label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="text" id="Phone_number" name="Phone_number" required pattern="^(?!0{10})[6-9]\d{9}$" placeholder="7989830891" style="margin-left:26px;" tabindex="8" maxlength="10">
|
||
|
|
<label for="Phone_number" class="required"><b>Phone_No:</b></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button type="button" tabindex="9" id="saveButton" onclick="saveAdd_new_contact()">Save</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
<!-- document.getElementById('Phone_number').addEventListener('input', function(event) {-->
|
||
|
|
<!-- const phoneNumberField = event.target;-->
|
||
|
|
<!-- const value = phoneNumberField.value;-->
|
||
|
|
|
||
|
|
<!-- // Check if the value is all zeros-->
|
||
|
|
<!-- const isAllZeros = /^0+$/.test(value);-->
|
||
|
|
<!-- // Check if the value matches the required pattern (starts with 6-9 and is 10 digits long)-->
|
||
|
|
<!-- const matchesPattern = /^(?!0{10})[6-9]\d{9}$/.test(value);-->
|
||
|
|
|
||
|
|
<!-- if (isAllZeros) {-->
|
||
|
|
<!-- phoneNumberField.setCustomValidity('Phone number cannot be all zeros.');-->
|
||
|
|
<!-- phoneNumberField.style.borderColor = 'red';-->
|
||
|
|
<!-- } else if (matchesPattern) {-->
|
||
|
|
<!-- phoneNumberField.setCustomValidity('');-->
|
||
|
|
<!-- phoneNumberField.style.borderColor = 'green';-->
|
||
|
|
<!-- } else {-->
|
||
|
|
<!-- phoneNumberField.setCustomValidity('Invalid phone number. It must start with a digit from 6 to 9 and be 10 digits long.');-->
|
||
|
|
<!-- phoneNumberField.style.borderColor = 'red';-->
|
||
|
|
<!-- }-->
|
||
|
|
|
||
|
|
<!-- phoneNumberField.reportValidity();-->
|
||
|
|
<!-- });-->
|
||
|
|
<!--function checkForOtherOption() {-->
|
||
|
|
<!-- var departmentSelect = document.getElementById('Department');-->
|
||
|
|
<!-- var selectedOption = departmentSelect.value;-->
|
||
|
|
|
||
|
|
<!-- if (selectedOption === 'Other') {-->
|
||
|
|
<!-- // Create an input element-->
|
||
|
|
<!-- var input = document.createElement('input');-->
|
||
|
|
<!-- input.type = 'text';-->
|
||
|
|
<!-- input.placeholder = 'Enter department';-->
|
||
|
|
<!-- input.style.marginLeft = '22px';-->
|
||
|
|
<!-- input.onblur = function() {-->
|
||
|
|
<!-- if (input.value.trim() !== "") {-->
|
||
|
|
<!-- var newDepartment = input.value.trim();-->
|
||
|
|
|
||
|
|
<!-- // Remove the existing "Other" option from the dropdown-->
|
||
|
|
<!-- var otherOption = departmentSelect.querySelector('option[value="Other"]');-->
|
||
|
|
<!-- if (otherOption) {-->
|
||
|
|
<!-- otherOption.remove();-->
|
||
|
|
<!-- }-->
|
||
|
|
|
||
|
|
<!-- // Add the new department as an option to the select-->
|
||
|
|
<!-- var newOption = document.createElement('option');-->
|
||
|
|
<!-- newOption.value = newDepartment;-->
|
||
|
|
<!-- newOption.text = newDepartment;-->
|
||
|
|
<!-- newOption.selected = true;-->
|
||
|
|
<!-- departmentSelect.add(newOption, departmentSelect.options.length - 1);-->
|
||
|
|
<!-- }-->
|
||
|
|
<!-- // Switch back to select element and reset the "Other" option-->
|
||
|
|
<!-- departmentSelect.style.display = 'inline-block';-->
|
||
|
|
<!-- input.style.display = 'none';-->
|
||
|
|
<!-- departmentSelect.value = input.value;-->
|
||
|
|
<!-- input.remove();-->
|
||
|
|
<!-- };-->
|
||
|
|
|
||
|
|
<!-- // Insert the input element after the select element-->
|
||
|
|
<!-- departmentSelect.parentNode.insertBefore(input, departmentSelect.nextSibling);-->
|
||
|
|
|
||
|
|
<!-- // Hide the select element and show the input element-->
|
||
|
|
<!-- departmentSelect.style.display = 'none';-->
|
||
|
|
<!-- input.style.display = 'inline-block';-->
|
||
|
|
<!-- input.focus();-->
|
||
|
|
<!-- }-->
|
||
|
|
<!--}-->
|
||
|
|
|
||
|
|
<!-- function saveAdd_new_contact() {-->
|
||
|
|
<!-- const form = document.getElementById('Add_new_contact');-->
|
||
|
|
<!-- 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 => {-->
|
||
|
|
<!-- 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('Contact 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>
|