Both Volunteers and C and D Waste included in this project
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.
 
 
 
 
 

2509 lines
89 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>GCC - Volunteers</title>
<!-- Links to Bootstrap CSS and JS, jQuery, and SweetAlert -->
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Only load it once) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js (Required for Bootstrap 4) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- SweetAlert JS (optional if you plan to use it) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
/*for radio button style*/
.radio-group {
display: flex;
align-items: center;
/* Ensures all items are aligned to the center */
}
.radio-item {
display: flex;
align-items: center;
margin-right: 20px;
/* Adds space between each radio item */
}
.radio-item input[type="radio"] {
margin-right: 10px;
/* Adds space between the radio button and its label */
vertical-align: middle;
/* Ensures vertical alignment */
}
.radio-item label {
margin: 0;
/* Removes any default margins that might affect alignment */
}
/*for radio button style*/
/*checkbox style*/
.zone-checkbox-label {
display: inline-block;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f8f9fa;
font-size: 16px;
cursor: pointer;
text-align: center;
width: 100%;
height:80px;
}
.zone-checkbox {
margin-right: 10px;
}
.form-check {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-check-input {
transform: scale(1.5);
}
/*checkbox style*/
label {
color: #858585;
}
/* Header Styling */
/* .header {
background-color: #1d495a;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-family: Arial, sans-serif;
}
.header .logo {
display: flex;
align-items: center;
}
.header .logo img {
height: 60px;
}
.header .menu {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin-left: 20px;
}
.header .menu a {
color: white;
margin: 0 15px;
text-decoration: none;
}
.header .menu a:hover {
text-decoration: underline;
} */
.req {
color: red;
}
/* otp*/
.otp-input-box {
display: flex;
justify-content: center;
gap: 10px;
/* Adjust spacing between the inputs */
}
.otp-input {
width: 50px;
/* Width for a square input */
height: 50px;
/* Height for a square input */
font-size: 24px;
/* Make the digits larger */
text-align: center;
/* Center the digit inside the box */
border: 1px solid #ccc;
/* Optional: add a border */
border-radius: 5px;
/* Optional: rounded corners */
outline: none;
/* Remove default focus outline */
transition: border-color 0.3s ease;
}
.otp-input:focus {
border-color: #007bff;
/* Change border color on focus */
}
/* otp*/
/*send otp styles*/
.input-group .form-control {
border-right: 0;
/* Remove right border of the input to blend with the button */
}
.input-group-append .btn {
border-left: 0;
/* Remove left border of the button */
}
@media (max-width: 768px) {
.zone-checkbox-label {
font-size: 14px;
}
}
.volunteer-header {
position: relative;
color: #1d4859;
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
}
.volunteer-title {
margin: 0;
text-align: center;
}
.language-buttons {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 5px;
}
.language-buttons .btn {
border-color: #1d4859;
color: #1d4859;
}
.language-buttons .btn:hover {
background-color: #1d4859;
color: white;
}
.language-buttons .btn.active,
.language-buttons .btn-primary {
background-color: #1d4859;
border-color: #1d4859;
color: white;
}
</style>
</head>
<body style="background-color: #ebf1fa;">
<h1 style="display: none;">GCC Volunteers</h1>
<h1 style="display: none;">GCC Volunteers Registration</h1>
<h1 style="display: none;">Chennai Volunteers </h1>
<h1 style="display: none;">Volunteers </h1>
<!--
<div class="header">
<div class="logo">
<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Greater Chennai Corporation Logo">
<span class="ml-2">GREATER CHENNAI CORPORATION</span>
</div>
<div class="menu">
<a href="https://chennaicorporation.gov.in/gcc/">Home</a>
<a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a>
<a href="https://chennaicorporation.gov.in/gcc/who-is-who/index_data.jsp">Who'sWho</a>
<a href="https://chennaicorporation.gov.in/gcc/council/about-council/">Council</a>
<a href="https://chennaicorporation.gov.in/gcc/tender/">Tender</a>
<a href="https://chennaicorporation.gov.in/gcc/department/">Departments</a>
<a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a>
</div>
</div>
-->
<!-- Header Start-->
<div class="container-fluid mt-5">
<div id="loader" style="display: none; text-align: center;">
<img src="/images/Thin broken ring.gif" alt="Loading..." />
</div>
<!-- <form onsubmit="return validateForm();" id="myForm"> -->
<form id="myForm">
<!-- Dropdowns for selecting category and subcategory -->
<!-- Bootstrap Card for displaying uploaded details -->
<div class="card" style="background-color: white;">
<div class="card-header volunteer-header">
<!-- <h3 class="volunteer-title">
ஜிசிசி தன்னார்வலர்கள்
</h3> -->
<div class="language-buttons">
<a href="/volunteer"
class="btn btn-sm btn-outline-primary">
English
</a>
<a href="/volunteer/index_tamil"
class="btn btn-sm btn-primary">
தமிழ்
</a>
</div>
</div>
<div class="card-body">
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="category">வகையைத் தேர்ந்தெடுக்கவும் <span class="req">*</span></label>
<select class="form-control" id="category" onchange="handleCategoryChange()">
<!-- <option value="-1">Select</option>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
<option value="NGO">NGO/Other Associations</option> -->
</select>
<span class="text-danger" id="categoryError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="subcategory">துணைப் பிரிவைத் தேர்ந்தெடுக்கவும் <span class="req">*</span></label>
<select class="form-control" id="subcategory">
<!-- <option value="-1">Select</option> -->
</select>
<span class="text-danger" id="subcategoryError"></span>
</div>
</div>
<input type="hidden" class="form-control" id="ref" th:value="${ref}">
<!-- Individual Form -->
<div class="individual-form" id="individual">
<h3>தொடர்பு விவரங்கள்</h3>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="name">பெயர்<span class="req">*</span></label>
<input type="text" class="form-control" id="name" placeholder="பெயரை உள்ளிடவும்">
<span class="text-danger" id="nameError"></span>
</div>
<!-- <div class="col-lg-12 col-md-12 mb-3">
<label for="aadhar">Aadhar Number<span class="req">*</span></label>
<input type="text" class="form-control" id="aadhar" maxlength="12"
placeholder="Enter Aadhar No... " oninput="validateAadhar()">
<span class="text-danger" id="aadharError"></span>
</div> -->
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="email">மின்னஞ்சல் </label>
<input type="text" class="form-control" id="email" placeholder="மின்னஞ்சலை உள்ளிடவும்">
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="dob">பிறந்த தேதி <span class="req">*</span></label>
<input type="date" class="form-control" id="dob" onchange="validateAge()">
<span class="text-danger" id="dobError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="gender">பாலினம்<span class="req">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">ஆண்</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">பெண்</label>
</div>
<div class="radio-item">
<input type="radio" id="others" name="gender" value="others">
<label for="others">மற்றவர்கள்</label>
</div>
</div>
<span class="text-danger" id="genderError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="mobile">மொபைல்<span class="req">*</span></label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic">+91</span>
</div>
<input type="text" class="form-control" id="mobile"
placeholder="வாட்ஸ்அப் மொபைல் எண்ணை உள்ளிடவும்" aria-label="Mobile"
aria-describedby="basic-addon1">
<button class="btn btn-primary" id="sendOtpButton">
<i class="fa fa-mobile-phone"></i> OTP அனுப்பு
</button>
<button class="btn btn-success" id="verifiedOTP" style="display:none" disabled>
<i class="fa fa-mobile-phone"></i> OTP சரிபார்க்கப்பட்டது
</button>
</div>
<span class="text-danger" id="mobileError"></span>
</div>
</div>
<div class="form-row mb-4">
<!-- <div class="col-lg-12 col-md-12 mb-3">
<label for="phone">Phone</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic2">044</span>
</div>
<input type="text" class="form-control" id="landline"
placeholder="Enter Landline Number" aria-label="Mobile"
aria-describedby="basic-addon1" minlength="10" maxlength="10"
pattern="[6-9]{1}[0-9]{9}">
</div>
</div> -->
<div class="col-lg-12 col-md-12 mb-3">
<label for="district">மாவட்டம் </label>
<input type="text" class="form-control" id="district" value="Chennai" disabled>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="address">முகவரி <span class="req">*</span></label>
<input type="text" class="form-control" id="address" placeholder="முகவரியை உள்ளிடவும்...">
<span class="text-danger" id="addressError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="pincode">அஞ்சல் குறியீடு<span class="req">*</span></label>
<input type="text" class="form-control" minlength="6" maxlength="6" pattern="[0-9]{6}"
id="pincode" placeholder="அஞ்சல் குறியீட்டை உள்ளிடவும்...">
<span class="text-danger" id="pincodeError"></span>
</div>
</div>
<!-- <div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="bloodgroup">Blood Group<span class="req">*</span></label>
<select class="form-control" id="bloodgroup" name="bloodgroup">
<option value="-1">Select Blood Group</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
</select>
<span class="text-danger" id="addressError"></span>
</div>
</div> -->
<!-- <h3>Education Qualification Details</h3>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="edu">Qualification<span class="req">*</span></label>
<input type="text" class="form-control" id="edu"
placeholder="Enter Highest Qualification Obtained">
<span class="text-danger" id="eduError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="college">College/Institution Name<span class="req">*</span></label>
<input type="text" class="form-control" id="college" placeholder="Enter College Name ">
<span class="text-danger" id="collegeError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="nss">NSS Cadet<span class="req">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="nssY" name="nss" value="true" checked>
<label for="nssY">Yes</label>
</div>
<div class="radio-item">
<input type="radio" id="nssN" name="nss" value="false">
<label for="nssN">No</label>
</div>
</div>
<span class="text-danger" id="nssError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="ncc">NCC Cadet<span class="req">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="nccY" name="ncc" value="true" checked>
<label for="male">Yes</label>
</div>
<div class="radio-item">
<input type="radio" id="nccN" name="ncc" value="false">
<label for="female">No</label>
</div>
</div>
<span class="text-danger" id="nccError"></span>
</div>
</div> -->
<!-- <h3>Employment Details</h3>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="occupation">Company/NGO Name (Enter NA if not working)</label>
<input type="text" class="form-control" id="occupation"
placeholder="Enter company/NGO...">
</div>
<div class="col-lg-12 col-md-12 mb-3" style="display:none;">
<label for="designation">Designation</label>
<input type="text" class="form-control" id="designation"
placeholder="Enter Designation...">
</div>
</div> -->
<!-- <h3>Other Information</h3> -->
<div class="form-row mb-4">
<!-- <div class="col-lg-12 col-md-12 mb-3">
<label for="ngoAny">Company/NGO you are associated with,if any(NA otherwise)<span
class="req">*</span></label>
<input type="text" class="form-control" id="ngoAny" placeholder="">
<span class="text-danger" id="ngoAnyError"></span>
</div> -->
<div class="col-lg-12 col-md-12 mb-3">
<label for="prevol"><strong>நீங்கள் இதற்கு முன்பு ஏதேனும் அவசரகாலச் சூழ்நிலையில் தன்னார்வத் தொண்டு செய்திருக்கிறீர்களா?</strong><span
class="req">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="preVolY" name="preVol" value="true" checked>
<label for="preVolY">ஆம்</label>
</div>
<div class="radio-item">
<input type="radio" id="preVolN" name="preVol" value="false">
<label for="preVolN">இல்லை</label>
</div>
</div>
<span class="text-danger" id="prevolError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="docs">
ஆவணம்<span class="req">*</span>
</label>
<select class="form-control" id="docs">
</select>
<span class="text-danger" id="docsError"></span>
</div>
</div>
<!-- Dynamic fields -->
<div class="form-row" id="documentFields"></div>
</div>
<!-- Individual Form -->
<!-- Corporate Form -->
<div class="corporate-form" id="corporate">
<h3>தொடர்பு விவரங்கள்</h3>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpName">நிறுவனத்தின் பெயர் <span class="req">*</span></label>
<input type="text" class="form-control" id="cmpName" placeholder="நிறுவனத்தின் பெயரை உள்ளிடவும்">
<span class="text-danger" id="cmpNameError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpEmail">நிறுவன மின்னஞ்சல் ஐடி</label>
<input type="text" class="form-control" id="cmpEmail" placeholder="நிறுவன மின்னஞ்சல் முகவரியை உள்ளிடவும்">
<span class="text-danger" id="cmpEmailError"></span>
</div>
</div>
<div class="form-row mb-4" style="display:none;">
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpLandline">Phone</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-ad">044</span>
</div>
<input type="text" class="form-control" id="cmpLandline"
placeholder="Enter LandLine Number" aria-label="Mobile"
aria-describedby="basic-addon1">
</div>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpMobile">Mobile</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-on1">+91</span>
</div>
<input type="text" class="form-control" id="cmpMobile"
placeholder="Enter Mobile Number" aria-label="Mobile"
aria-describedby="basic-addon1" minlength="10" maxlength="10"
pattern="[6-9]{1}[0-9]{9}">
</div>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpDistrict">மாவட்டம் </label>
<input type="text" class="form-control" id="cmpDistrict" value="Chennai" disabled>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpAddress">முகவரி <span class="req">*</span></label>
<input type="text" class="form-control" id="cmpAddress" placeholder="முகவரியை உள்ளிடவும்...">
<span class="text-danger" id="cmpAddressError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpPincode">அஞ்சல் குறியீடு <span class="req">*</span></label>
<input type="text" class="form-control" id="cmpPincode" minlength="6" maxlength="6"
pattern="[0-9]{6}" placeholder="அஞ்சல் குறியீட்டை உள்ளிடவும்...">
<span class="text-danger" id="cmpPincodeError"></span>
</div>
</div>
<h4 class="">உங்கள் நிறுவனத்திலிருந்து தன்னார்வலர்களின் எண்ணிக்கை <span class="req">*</span></h4>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<input type="number" class="form-control" id="cmpNov">
<span class="text-danger" id="cmpNovError"></span>
</div>
</div>
<h4>நிறுவனத்தில் தொடர்பு கொள்ள வேண்டிய நபர்</h4>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmpPoc">பெயர் <span class="req">*</span></label>
<input type="text" class="form-control" id="cmpPoc" placeholder="பெயரை உள்ளிடவும்">
<span class="text-danger" id="cmpPocError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmdPod">பதவிப்பெயர் <span class="req">*</span></label>
<input type="text" class="form-control" id="cmdPod" placeholder="பதவியை உள்ளிடவும்...">
<span class="text-danger" id="cmdPodError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmdPoE">மின்னஞ்சல் முகவரி<span class="req">*</span></label>
<input type="text" class="form-control" id="cmdPoE" placeholder="மின்னஞ்சல் முகவரியை உள்ளிடவும்...">
<span class="text-danger" id="cmdPoEError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="cmdPom">தொலைபேசி எண்<span class="req">*</span></label>
<input type="text" class="form-control" id="cmdPom" placeholder="கைபேசி எண்ணை உள்ளிடவும்...">
<span class="text-danger" id="cmdPomError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="comprevol">உங்கள் நிறுவனம் இதற்கு முன்னர் ஏதேனும் அவசரகாலச் சூழ்நிலையில் தன்னார்வத் தொண்டு செய்துள்ளதா?<span class="req">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="cmpVolY" name="cmpPVol" value="true" checked>
<label for="cmpVolY">ஆம் </label>
</div>
<div class="radio-item">
<input type="radio" id="cmpVolN" name="cmpPVol" value="false">
<label for="cmpVolN">இல்லை</label>
</div>
</div>
<span class="text-danger" id="comprevolError"></span>
</div>
</div>
</div>
<!-- Corporate Form -->
<!-- NGO Form -->
<div class="ngo-form" id="ngo">
<h3>தொடர்பு விவரங்கள்</h3>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 col-sm-12 mb-3">
<label for="ngoOrgName">நிறுவனத்தின் பெயர் <span class="req">*</span></label>
<input type="text" class="form-control" id="ngoOrgName" placeholder="பெயரை உள்ளிடவும்">
<span class="text-danger" id="ngoOrgNameError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="ngoOrgEmail">நிறுவன மின்னஞ்சல் ஐடி</label>
<input type="text" class="form-control" id="ngoOrgEmail" placeholder="மின்னஞ்சல் முகவரியை உள்ளிடவும்">
<span class="text-danger" id="ngoOrgEmailError"></span>
</div>
</div>
<div class="form-row mb-4" style="display:none;">
<div class="col-lg-12 col-md-12 mb-3">
<label for="oLandline">Phone</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-aon1">044</span>
</div>
<input type="text" class="form-control" id="oLandline"
placeholder="Enter Landline Number" aria-label="Mobile"
aria-describedby="basic-addon1">
</div>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="oMobile">Mobile</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">+91</span>
</div>
<input type="text" class="form-control" id="oMobile"
placeholder="Enter Mobile Number" aria-label="Mobile"
aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="oDistrict">மாவட்டம் </label>
<input type="text" class="form-control" id="oDistrict" value="Chennai" disabled>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="oAddress">முகவரி <span class="req">*</span></label>
<input type="text" class="form-control" id="oAddress" placeholder="முகவரியை உள்ளிடவும்...">
<span class="text-danger" id="oAddressError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="oPincode">அஞ்சல் குறியீடு<span class="req">*</span></label>
<input type="picode" class="form-control" id="oPincode" minlength="6" maxlength="6"
pattern="[0-9]{6}" placeholder="அஞ்சல் குறியீட்டை உள்ளிடவும்...">
<span class="text-danger" id="oPincodeError"></span>
</div>
</div>
<h4 class="volorg">உங்கள் அமைப்பிலிருந்து தன்னார்வலர்களின் எண்ணிக்கை<span class="req">*</span></h4>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<input type="number" class="form-control" id="oNvol">
<span class="text-danger" id="oNvolError"></span>
</div>
</div>
<h4>நிறுவனத்தில் தொடர்பு கொள்ள வேண்டிய நபர் </h4>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="oPoc">பெயர் <span class="req">*</span></label>
<input type="text" class="form-control" id="oPoc" placeholder="நபரின் பெயர்">
<span class="text-danger" id="oPocError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="oPod">பதவிப்பெயர்<span class="req">*</span></label>
<input type="text" class="form-control" id="oPod" placeholder="பதவியை உள்ளிடவும்...">
<span class="text-danger" id="oPodError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="oPoe">மின்னஞ்சல் முகவரி<span class="req">*</span></label>
<input type="text" class="form-control" id="oPoE" placeholder="மின்னஞ்சல் முகவரியை உள்ளிடவும்...">
<span class="text-danger" id="oPoeError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="oPom">தொலைபேசி எண் <span class="req">*</span></label>
<input type="text" class="form-control" id="oPom" placeholder="தொலைபேசி எண்ணை உள்ளிடவும்...">
<span class="text-danger" id="oPomError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-12 col-md-12 mb-3">
<label for="oPvolY">உங்கள் அமைப்பு இதற்கு முன்னர் ஏதேனும் அவசரகாலச் சூழ்நிலைகளில் தன்னார்வத் தொண்டு செய்துள்ளதா?<span class="req">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="oPvolY" name="oPvolY" value="true" checked>
<label for="male">ஆம் </label>
</div>
<div class="radio-item">
<input type="radio" id="oPvolN" name="oPvolY" value="false">
<label for="female">இல்லை</label>
</div>
</div>
<span class="text-danger" id="oPvolYError"></span>
</div>
</div>
</div>
<!-- NGO Form -->
<div class="form-row">
<div class="col-lg-12 col-md-12 mb-3">
<label for="expertise">நிபுணத்துவத் துறை<span class="req">*</span></label>
<select class="form-control" id="expertise">
</select>
<span class="text-danger" id="expertiseError"></span>
</div>
<!-- Dynamic Other Expertise field -->
<div class="col-lg-12 col-md-12 mb-3" id="otherExpertiseContainer" style="display:none;">
<label for="otherExpertise">
மற்ற நிபுணத்துவத்தைக் குறிப்பிடவும்<span class="req">*</span>
</label>
<input type="text"
class="form-control"
id="other_expertise"
placeholder="மற்ற நிபுணத்துவத்தைக் குறிப்பிடவும்"
autocomplete="off">
<span class="text-danger" id="otherExpertiseError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="ephno">அவசரக்காலத் தொலைபேசி எண்<span class="req">*</span></label>
<input type="text" class="form-control" id="ephno" placeholder="அவசரக்காலத் தொலைபேசி எண்" maxlength="10" inputmode="numeric" autocomplete="off" required="required">
<span class="text-danger" id="ephnoError"></span>
</div>
</div>
<!-- Preferred area of work checkboxes -->
<h5>விருப்பமான பணியிடம்<span class="req">*</span></h5>
<div class="form-check mb-3">
<input class="form-check-input zone-checkbox" type="checkbox" id="anyArea" name="anyArea"
value="0-any" onclick="checkAnyArea()">
<label class="form-check-label" for="anyArea">சென்னையில் எந்தப் பகுதியிலும்</label>
<span class="text-danger" id="anyAreaError"></span>
</div>
<div class="container mt-5">
<!-- First Row of Zones -->
<div class="form-row">
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone1"
name="zone1" value="1-Thiruvottiyur" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone1">மண்டலம் 1 <br> (திருவொற்றியூர்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone2"
name="zone2" value="2-Manali" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone2">மண்டலம் 2 <br> (மணலி)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone3"
name="zone3" value="3-Madhavaram" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone3">மண்டலம் 3 <br>(மாதவரம்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone4"
name="zone4" value="4-Tondiarpet" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone4">மண்டலம் 4 <br>(தண்டையார்பேட்டை)</label>
</div>
</div>
</div>
<!-- Second Row of மண்டலம்s -->
<div class="form-row mt-2">
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone5"
name="zone5" value="5-Royapuram" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone5">மண்டலம் 5<br> (ராயபுரம்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone6"
name="zone6" value="6-ThiruViKa Nagar" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone6">மண்டலம் 6 <br>(திரு-வி-க நகர்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone7"
name="zone7" value="7-Ambattur" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone7">மண்டலம் 7<br> (அம்பத்தூர்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone8"
name="zone8" value="8-Anna Nagar" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone8">மண்டலம் 8<br> (அண்ணா நகர்)</label>
</div>
</div>
</div>
<!-- Third Row of மண்டலம்s -->
<div class="form-row mt-2">
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone9"
name="zone9" value="9-Teynampet" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone9">மண்டலம் 9 <br>(தேனாம்பேட்டை)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone10"
name="zone10" value="10-Kodambakkam" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone10">மண்டலம் 10<br> (கோடம்பாக்கம்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone11"
name="zone11" value="11-Valasarvakkam" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone11">மண்டலம் 11<br> (வளசரவாக்கம்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone12"
name="zone12" value="12-Alandur" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone12">மண்டலம் 12<br> (ஆலந்தூர்)</label>
</div>
</div>
</div>
<!-- Fourth Row of மண்டலம்s -->
<div class="form-row mt-2">
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone13"
name="zone13" value="13-Adyar" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone13">மண்டலம் 13<br> (அடையார்)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone14"
name="zone14" value="14-Perungudi" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone14">மண்டலம் 14<br> (பெருங்குடி)</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone15"
name="zone15" value="15-Sholinganallur" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone15">மண்டலம் 15 <br>(சோழிங்கநல்லூர்)</label>
</div>
</div>
</div>
</div>
<center>
<!-- <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button> -->
<button type="button" class="btn btn-primary" id="submitBtn" onclick="validateForm()">சமர்ப்பிக்கவும்</button>
</center>
</div>
</div>
</form>
</div>
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
<div style="position: relative; top: 50%; transform: translateY(-50%);">
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<!-- Add the 'Please wait' text below the spinner -->
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
</div>
</div>
<!-- OTP Modal -->
<div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
onsubmit="return verifyOtp();">
<div class="modal-header">
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="color:black;border: white;background-color: white;">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!-- End modal-header -->
<div class="modal-body">
<div class="row ">
<div class="mb-3" style="text-align: center;">
<img src="https://gccservices.in/gcc/files/c_d/otp.png" width="50%" alt="Mobileotp">
</div>
</div>
<!-- End row -->
<div class="row d-flex justify-content-center align-items-center">
<div class="mb-0">
<h4>OTP Verification</h4>
<p class="text-mute">Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b>
</p>
<p class="text-danger" id="otperror"></p>
</div>
</div>
<!-- End row -->
<div class="row d-flex justify-content-center align-items-center">
<div class="mb-3 ">
<div class="otp-input-box">
<input type="text" maxlength="1" class="otp-input" id="otp1" required />
<input type="text" maxlength="1" class="otp-input" id="otp2" required />
<input type="text" maxlength="1" class="otp-input" id="otp3" required />
<input type="text" maxlength="1" class="otp-input" id="otp4" required />
<input type="text" maxlength="1" class="otp-input" id="otp5" required />
</div>
</div>
</div>
<!-- End row -->
<!--<div class="row d-flex justify-content-center align-items-center">
<div class="mb-3">
<div id="resend-containers">
<p class="mb-0 text-info" id="resendlink"></p>
</div>
</div>
</div>-->
<!-- End row -->
</div>
<!-- End modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="but">Verify OTP</button>
</div>
<!-- End modal-footer -->
</form>
</div>
<!-- End modal-content -->
</div>
<!-- End modal-dialog -->
</div>
<!-- End OTP Modal -->
<script>
document.querySelector('.individual-form').style.display = 'none';
document.querySelector('.corporate-form').style.display = 'none';
document.querySelector('.ngo-form').style.display = 'none';
/* function handleCategoryChange() {
// Get selected category
var category = document.getElementById("category").value;
// Hide all forms
document.querySelector('.individual-form').style.display = 'none';
document.querySelector('.corporate-form').style.display = 'none';
document.querySelector('.ngo-form').style.display = 'none';
// Clear subcategory options
var subcategory = document.getElementById("subcategory");
subcategory.innerHTML = '<option value="-1">Select</option>';
// Show the corresponding form and set subcategory options
if (category === "Individual") {
document.querySelector('.individual-form').style.display = 'block';
subcategory.innerHTML += `
<option value="Medical Assistance/Counselling Service">Medical Assistance/Counselling Service</option>
<option value="Cooks & Assistance">Cooks & Assistance</option>
<option value="General Assistance">General Assistance</option>
<option value="Distribution/Delivery Support">Distribution/Delivery Support</option>
<option value="Centre Admin Support">Centre Admin Support</option>
<option value="Graphic Designers">Graphic Designers</option>
<option value="Call Centre Support">Call Centre Support</option>
<option value="Survey">Survey</option>
`;
} else if (category === "Corporate") {
document.querySelector('.corporate-form').style.display = 'block';
subcategory.innerHTML += `<option value="N/A">N/A</option>`;
} else if (category === "NGO") {
document.querySelector('.ngo-form').style.display = 'block';
subcategory.innerHTML += `<option value="N/A">N/A</option>`;
}
} */
$("#name").on("input", function () {
this.value = this.value.replace(/[^a-zA-Z.\s]/g, '');
});
$("#cmpPoc").on("input", function () {
this.value = this.value.replace(/[^a-zA-Z.\s]/g, '');
});
$("#oPoc").on("input", function () {
this.value = this.value.replace(/[^a-zA-Z.\s]/g, '');
});
$("#dob").on("keydown paste drop", function (e) {
e.preventDefault();
});
$("#pincode").on("input", function () {
this.value = this.value.replace(/\D/g, '').slice(0, 6);
});
$("#ephno").on("input", function () {
this.value = this.value.replace(/\D/g, '').slice(0, 10);
});
$("#mobile").on("input", function () {
this.value = this.value.replace(/\D/g, '').slice(0, 10);
});
$("#cmdPom").on("input", function () {
this.value = this.value.replace(/\D/g, '').slice(0, 10);
});
$("#oPom").on("input", function () {
this.value = this.value.replace(/\D/g, '').slice(0, 10);
});
$("#expertise").on("change", function () {
var selectedOption = $(this).find("option:selected");
var selectedId = selectedOption.val();
var expertiseArea = selectedOption.attr("data-category") || "";
// Check ID = 7 OR expertise contains "Others"
var isOtherExpertise =
selectedId === "7" ||
expertiseArea.toLowerCase().includes("others");
if (isOtherExpertise) {
$("#otherExpertiseContainer").show();
} else {
$("#otherExpertiseContainer").hide();
// Clear previous value and error
$("#other_expertise").val("");
$("#otherExpertiseError").text("");
}
});
$(document).ready(function () {
$.ajax({
url: "/volunteer/api/registration/getAllCategory",
type: "GET",
success: function (categories) {
let categoryDropdown = $('#category');
categoryDropdown.append(`<option value="-1">Select</option>`);
categories.forEach(function (cat) {
$('<option>', {
value: cat.id,
text: cat.category_tamil
}).attr('data-category', cat.category)
.appendTo(categoryDropdown);
});
}
});
$.ajax({
url: "/volunteer/api/registration/getAllExpertise",
type: "GET",
success: function (expertise) {
let expertiseDropdown = $('#expertise');
expertiseDropdown.empty();
expertiseDropdown.append(`<option value="">Select</option>`);
expertise.forEach(function (exp) {
$('<option>', {
value: exp.id,
text: exp.expertise_area_tamil
}).attr('data-category', exp.expertise_area_tamil)
.appendTo(expertiseDropdown);
});
}
});
});
$("#docs").on("change", function () {
var selectedOption = $(this).find("option:selected");
var labelName = selectedOption.attr("data-category") || "";
var option = $(this).val();
var documentFields = $("#documentFields");
documentFields.empty();
$("#docsError").text("");
if (option === "-1" || option === "") {
return;
}
var optionName = labelName;
var html = `
<div class="col-lg-12 col-md-12 mb-3">
<label for="doc_number">
${optionName} எண்<span class="req">*</span>
</label>
<input type="text"
class="form-control"
id="doc_number"
name="doc_number"
placeholder="${optionName} எண்..."
autocomplete="off">
<span class="text-danger" id="docNumberError"></span>
</div>
<div class="col-lg-12 col-md-12 mb-3">
<label for="doc_url">
${optionName} படம் (20 MB-க்கும் குறைவானது - jpg/jpeg/pdf)<span class="req">*</span>
</label>
<input type="file"
class="form-control"
id="doc_url"
name="doc_url"
accept=".pdf,.jpg,.jpeg">
<span class="text-danger" id="docFileError"></span>
</div>
`;
documentFields.html(html);
});
function handleCategoryChange() {
var categoryId = $('#category').val();
// Hide all forms
$('.individual-form, .corporate-form, .ngo-form').hide();
// Clear and reset subcategory dropdown
let subcategory = $('#subcategory');
subcategory.empty().append('<option value="-1">Select</option>');
// Determine form visibility based on selected category name
//let selectedText = $('#category option:selected').text();
let selectedText = $('#category').val();
/* if (selectedText === "Individual") {
$('.individual-form').show();
} else if (selectedText === "Corporate") {
$('.corporate-form').show();
} else if (selectedText === "NGO/Other Associations") {
$('.ngo-form').show();
} */
if (selectedText === "1") {
$.ajax({
url: "/volunteer/api/registration/getAllVolunteerDocs",
type: "GET",
success: function (docsvalues) {
let docsDropdown = $('#docs');
docsDropdown.empty();
docsDropdown.append(`<option value="">Select</option>`);
docsvalues.forEach(function (docs) {
$('<option>', {
value: docs.id,
text: docs.tamil_name
}).attr('data-category', docs.tamil_name)
.appendTo(docsDropdown);
});
}
});
$('.individual-form').show();
} else if (selectedText === "2") {
$('.corporate-form').show();
} else if (selectedText === "3") {
$('.ngo-form').show();
}
// Fetch subcategories
if (categoryId !== "-1") {
$.ajax({
url: "/volunteer/api/registration/getSubCategoryById",
type: "GET",
data: { category_id: categoryId },
success: function (subcategories) {
subcategories.forEach(function (sub) {
$('<option>', {
value: sub.id,
text: sub.sub_category_tamil
}).attr('data-sub-category', sub.sub_category)
.appendTo(subcategory);
});
}
});
}
}
function uncheckAnyArea() {
}
function checkAnyArea() {
var anyArea = document.getElementById("anyArea").checked;
if (anyArea) {
for (var i = 1; i <= 15; i++) {
document.getElementById("zone" + i).checked = false;
}
}
}
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
let mobilePattern = /^[0-9]{10}$/;
let pincodePattern = /^[0-9]{6}$/;
function validateForm() {
var isValid = true;
$('.text-danger').text('');
var i = 0;
$(".zone-checkbox:checked").each(function () {
if ($(this).val()) {
i++;
};
});
var category = document.getElementById("category");
//var selectedTextcategory = category.options[category.selectedIndex].text;
var selectedTextcategory = $('#category').val();
//console.log("selectedTextcategory=="+selectedTextcategory);
if (selectedTextcategory === "Select" || selectedTextcategory === "-1" || selectedTextcategory === "") {
$("#categoryError").text("தயவுசெய்து வகையைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
var subcategory = document.getElementById("subcategory");
var selectedTextsubcategory = subcategory.options[subcategory.selectedIndex].text;
var selectedTextsubcategory = $('#subcategory').val();
//console.log("selectedTextsubcategory=="+selectedTextsubcategory);
if (selectedTextsubcategory === "Select" || selectedTextsubcategory === "-1" || selectedTextsubcategory === "") {
$("#subcategoryError").text("தயவுசெய்து துணைப்பிரிவைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
var ephno = $.trim($("#ephno").val());
//console.log("ephno===="+ephno);
if (ephno === "") {
$("#ephnoError").text("அவசரகாலத் தொலைபேசி எண்ணை உள்ளிடவும்");
isValid = false;
} else if (!/^\d{10}$/.test(ephno)) {
$("#ephnoError").text("தொலைபேசி எண் சரியாக 10 இலக்கங்களைக் கொண்டிருக்க வேண்டும்");
isValid = false;
} else if (!/^[6-9]/.test(ephno)) {
$("#ephnoError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்");
isValid = false;
}else if (/^(\d)\1{9}$/.test(ephno)) {
$("#ephnoError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
isValid = false;
} else if (
ephno === "1234567890" ||
ephno === "0123456789" ||
ephno === "9876543210" ||
ephno === "0987654321"
) {
$("#ephnoError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
isValid = false;
}
var selectedEOption = $("#expertise option:selected");
var expertisevalue = $.trim(selectedEOption.val());
var expertiseArea = $.trim(selectedEOption.attr("data-category") || "");
if (expertisevalue === "" || expertisevalue === "-1") {
$("#expertiseError").text("நிபுணத்துவம் உள்ள துறையைத் தேர்ந்தெடுக்கவும்");
isValid = false;
} else if (
expertisevalue === "7" ||
expertiseArea.toLowerCase().includes("others")
) {
var otherExpertise = $.trim($("#other_expertise").val());
if (otherExpertise === "") {
$("#otherExpertiseError").text("மற்ற நிபுணத்துவத்தைக் குறிப்பிடவும்");
isValid = false;
}
}
if (selectedTextcategory === "1") {
var name = document.getElementById("name").value = document.getElementById("name").value.trim();
var email = document.getElementById("email").value = document.getElementById("email").value.trim();
let genderSelected = document.querySelector('input[name="gender"]:checked');
var mobile = document.getElementById("mobile").value = document.getElementById("mobile").value.trim();
var address = document.getElementById("address").value = document.getElementById("address").value.trim();
var pincode = document.getElementById("pincode").value = document.getElementById("pincode").value.trim();
//var edu = document.getElementById("edu").value = document.getElementById("edu").value.trim();
//var college = document.getElementById("college").value = document.getElementById("college").value.trim();
//let nssSelected = document.querySelector('input[name="nss"]:checked');
//let nccSelected = document.querySelector('input[name="ncc"]:checked');
// var occupation = document.getElementById("occupation").value= document.getElementById("occupation").value.trim();
// var designation = document.getElementById("designation").value= document.getElementById("designation").value.trim();
let preVolSelected = document.querySelector('input[name="preVol"]:checked');
//var ngoAny = document.getElementById("ngoAny").value = document.getElementById("ngoAny").value.trim();
var dob = document.getElementById("dob").value = document.getElementById("dob").value.trim();
//var aadhar = document.getElementById("aadhar").value = document.getElementById("aadhar").value.trim();
//var bloodgroup = document.getElementById("bloodgroup").value;
if (name == undefined || name == "") {
$("#nameError").text("தயவுசெய்து பெயரை உள்ளிடவும்.");
isValid = false;
}
if (dob == undefined || dob == "") {
$("#dobError").text("தயவுசெய்து பிறந்த தேதியை உள்ளிடவும்.");
isValid = false;
}
if(email!=""){
if (!emailPattern.test(email)) {
$("#emailError").text("தயவுசெய்து சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
isValid = false;
}
}
if (!genderSelected) {
$("#genderError").text("தயவுசெய்து பாலினத்தைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
// Check if verifiedOTP is disabled only during form submission
if ($('#verifiedOTP').prop('disabled')) {
Swal.fire({
title: "Warning!",
text: "OTP not Verified",
icon: "warning",
confirmButtonText: "OK"
});
isValid = false; // Set isValid to false if verifiedOTP is disabled
}
if (mobile === "" || !mobilePattern.test(mobile)) {
$("#mobileError").text("தயவுசெய்து சரியான 10 இலக்க அலைபேசி எண்ணை உள்ளிடவும்.");
isValid = false;
}
if (!/^\d{10}$/.test(mobile)) {
$("#mobileError").text("தொலைபேசி எண்ணில் சரியாக 10 இலக்கங்கள் இருக்க வேண்டும்.");
isValid = false;
} if (!/^[6-9]/.test(mobile)) {
$("#mobileError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்.");
isValid = false;
} if (/^(\d)\1{9}$/.test(mobile)) {
$("#mobileError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
isValid = false;
} if (
mobile === "1234567890" ||
mobile === "0123456789" ||
mobile === "9876543210" ||
mobile === "0987654321"
) {
$("#mobileError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
isValid = false;
}
if (address == undefined || address == "") {
$("#addressError").text("தயவுசெய்து முகவரியை உள்ளிடவும்.");
isValid = false;
}
// Pincode validation
if (pincode === "" || !pincodePattern.test(pincode)) {
$("#pincodeError").text("தயவுசெய்து செல்லுபடியாகும் 6 இலக்க அஞ்சல் குறியீட்டை உள்ளிடவும்.");
isValid = false;
}
/* if (edu == undefined || edu == "") {
$("#eduError").text("Please Enter Education details !");
isValid = false;
}
if (college == undefined || college == "") {
$("#collegeError").text("Please Enter college details !");
isValid = false;
}
if (aadhar == undefined || aadhar == "") {
$("#aadharError").text("Please Enter Aadhar details !");
isValid = false;
}
if (bloodgroup == -1) {
$("#bloodgroupError").text("Please Select Blood Group !");
isValid = false;
}
if (!nssSelected) {
$("#nssError").text("Please Select NSS details !");
isValid = false;
}
if (!nccSelected) {
$("#nccError").text("Please Select NCC details !");
isValid = false;
}*/
var docs = $.trim($("#docs").val());
if (docs === "" || docs === "-1") {
$("#docsError").text("ஆவணத்தைத் தேர்ந்தெடுக்கவும்");
isValid = false;
} else {
// Get selected document name
var selectedOption = $("#docs option:selected");
var documentName = $.trim(selectedOption.attr("data-category") || "");
// -----------------------------
// Document Number Validation
// -----------------------------
var docNumber = $.trim($("#doc_number").val());
if (docNumber === "") {
$("#docNumberError").text("" + documentName + " எண்ணை உள்ளிடவும்");
isValid = false;
}
if (docs === "1") {
// Aadhar = exactly 12 numeric digits
if (!/^\d{12}$/.test(docNumber)) {
$("#docNumberError").text(
"ஆதார் எண் சரியாக 12 இலக்கங்களைக் கொண்டிருக்க வேண்டும்"
);
isValid = false;
}
} else {
// Other documents = alphanumeric, max 10 characters
if (!/^[a-zA-Z0-9]{10}$/.test(docNumber)) {
$("#docNumberError").text(
documentName + " எண்ணில் எழுத்துக்கள் மற்றும் எண்கள் மட்டுமே இருக்க வேண்டும் (அதிகபட்சம் 10 எழுத்துக்கள்)"
);
isValid = false;
}
}
// -----------------------------
// Document File Validation
// -----------------------------
var docFileInput = $("#doc_url")[0];
if (!docFileInput || docFileInput.files.length === 0) {
$("#docFileError").text(
" " + documentName + " தேர்ந்தெடுக்கவும் "
);
isValid = false;
} else {
var docFile = docFileInput.files[0];
// Maximum 20 MB
var maxSize = 20 * 1024 * 1024;
if (docFile.size >= maxSize) {
$("#docFileError").text(
"அளவு 20 MB-க்குக் குறைவாக இருக்க வேண்டும்"
);
isValid = false;
}
// File type
var allowedTypes = [
"image/jpeg",
"application/pdf"
];
if (!allowedTypes.includes(docFile.type)) {
$("#docFileError").text(
"JPG, JPEG அல்லது PDF கோப்புகள் மட்டுமே அனுமதிக்கப்படும்"
);
isValid = false;
}
}
}
if (!preVolSelected) {
$("#prevolError").text("தயவுசெய்து முந்தைய தன்னார்வலர் விவரங்களைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
var cmobile = $.trim($("#mobile").val());
if(cmobile !== "" && ephno !== "" && cmobile === ephno){
Swal.fire({
title: "Warning!",
text: "கைபேசி எண்ணும் அவசரக்காலத் தொலைபேசி எண்ணும் ஒன்றாக இருக்கக்கூடாது",
icon: "warning",
confirmButtonText: "OK"
});
isValid = false;
}
/* if (ngoAny == undefined || ngoAny == "") {
$("#ngoAnyError").text("Please Enter Company/NGO details !");
isValid = false;
} */
if (i == 0) {
$("#anyAreaError").text("விருப்பமான பகுதி விவரங்களைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
if (isValid) {
$("#submitBtn").prop("disabled", true);
saveTheIndividualForm();
return false;
}
else{
var firstError = $(".text-danger")
.filter(function () {
return $.trim($(this).text()) !== "";
})
.first();
if (firstError.length) {
var target = firstError
.closest(".mb-3")
.find("input, select, textarea")
.first();
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - 120
}, 600);
// Focus the field
target.focus();
}else {
// Fallback to error message
$("html, body").animate({
scrollTop: firstError.offset().top - 120
}, 600);
}
}
}
return false;
}
else if (selectedTextcategory === "2") {
var cmpName = document.getElementById("cmpName").value = document.getElementById("cmpName").value.trim();
var cmpEmail = document.getElementById("cmpEmail").value = document.getElementById("cmpEmail").value.trim();
var cmpLandline = document.getElementById("cmpLandline").value = document.getElementById("cmpLandline").value.trim();
var cmpMobile = document.getElementById("cmpMobile").value = document.getElementById("cmpMobile").value.trim();
var cmpAddress = document.getElementById("cmpAddress").value = document.getElementById("cmpAddress").value.trim();
var cmpPincode = document.getElementById("cmpPincode").value = document.getElementById("cmpPincode").value.trim();
var cmpNov = document.getElementById("cmpNov").value = document.getElementById("cmpNov").value.trim();
var cmpPoc = document.getElementById("cmpPoc").value = document.getElementById("cmpPoc").value.trim();
var cmdPom = document.getElementById("cmdPom").value = document.getElementById("cmdPom").value.trim();
var cmpPVolSelect = document.querySelector('input[name="cmpPVol"]:checked');
var cmdPoE = document.getElementById("cmdPoE").value = document.getElementById("cmdPoE").value.trim();
var cmdPod = $("#cmdPod").val().trim();
if (cmpName == undefined || cmpName == "") {
$("#cmpNameError").text("தயவுசெய்து நிறுவனத்தின் பெயரை உள்ளிடவும்.");
isValid = false;
}
if(cmpEmail!=""){
if (!emailPattern.test(cmpEmail)) {
$("#cmpEmailError").text("சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
isValid = false;
}
}
if (cmpAddress == undefined || cmpAddress == "") {
$("#cmpAddressError").text("தயவுசெய்து நிறுவனத்தின் முகவரியை உள்ளிடவும்.");
isValid = false;
}
if (cmpPincode == undefined || cmpPincode == "") {
$("#cmpPincodeError").text("தயவுசெய்து அஞ்சல் குறியீட்டை உள்ளிடவும். ");
isValid = false;
}
if (cmpNov == undefined || cmpNov == "") {
$("#cmpNovError").text("தயவுசெய்து தன்னார்வலர்களின் எண்ணிக்கையை உள்ளிடவும்.");
isValid = false;
}
if (!/^[1-9]\d*$/.test(cmpNov)) {
$("#cmpNovError").text("சரியான எண்ணிக்கையிலான தன்னார்வலர்களை உள்ளிடவும்.");
isValid = false;
}
if (cmpPoc == undefined || cmpPoc == "") {
$("#cmpPocError").text("நடத்தைக்கான பொறுப்பாளர் பெயரை உள்ளிடவும்.");
isValid = false;
}
if (cmdPod == "") {
$("#cmdPodError").text("நடத்தைக்கான பொறுப்பாளர் பதவியைக் குறிப்பிடவும்");
isValid = false;
}
if (cmdPoE === "" || !emailPattern.test(cmdPoE)) {
$("#cmdPoEError").text("தொடர்பு கொள்ள வேண்டியவருக்கான சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
isValid = false;
}
if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
$("#cmdPomError").text("தொடர்பு கொள்ள வேண்டியவரின் செல்லுபடியாகும் அலைபேசி எண்ணை உள்ளிடவும்.");
isValid = false;
}
if (!/^\d{10}$/.test(cmdPom)) {
$("#cmdPomError").text("தொலைபேசி எண்ணில் சரியாக 10 இலக்கங்கள் இருக்க வேண்டும்.");
isValid = false;
} if (!/^[6-9]/.test(cmdPom)) {
$("#cmdPomError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்.");
isValid = false;
} if (/^(\d)\1{9}$/.test(cmdPom)) {
$("#cmdPomError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
isValid = false;
} if (
cmdPom === "1234567890" ||
cmdPom === "0123456789" ||
cmdPom === "9876543210" ||
cmdPom === "0987654321"
) {
$("#cmdPomError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
isValid = false;
}
if (!cmpPVolSelect) {
$("#anyAreaError").text("தயவுசெய்து முந்தைய தன்னார்வலர்களின் விவரங்களைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
var c1mobile = $.trim($("#cmdPom").val());
if(c1mobile !== "" && ephno !== "" && c1mobile === ephno){
Swal.fire({
title: "Warning!",
text: "கைபேசி எண்ணும் அவசரக்காலத் தொலைபேசி எண்ணும் ஒன்றாக இருக்கக்கூடாது",
icon: "warning",
confirmButtonText: "OK"
});
isValid = false;
}
if (i == 0) {
alert("விருப்பமான பகுதி விவரங்களைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
/* if (isValid) {
saveCorporateDetails();
} */
if (isValid) {
$("#submitBtn").prop("disabled", true);
saveCorporateDetails();
return false;
}
else{
var firstError = $(".text-danger")
.filter(function () {
return $.trim($(this).text()) !== "";
})
.first();
if (firstError.length) {
var target = firstError
.closest(".mb-3")
.find("input, select, textarea")
.first();
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - 120
}, 600);
// Focus the field
target.focus();
}else {
// Fallback to error message
$("html, body").animate({
scrollTop: firstError.offset().top - 120
}, 600);
}
}
}
return false;
}
else if (selectedTextcategory === "3") {
var cmpName = document.getElementById("ngoOrgName").value = document.getElementById("ngoOrgName").value.trim();
var ngoOrgEmail = document.getElementById("ngoOrgEmail").value = document.getElementById("ngoOrgEmail").value.trim();
var cmpLandline = document.getElementById("oLandline").value = document.getElementById("oLandline").value.trim();
var cmpMobile = document.getElementById("oMobile").value = document.getElementById("oMobile").value.trim();
var cmpAddress = document.getElementById("oAddress").value = document.getElementById("oAddress").value.trim();
var cmpPincode = document.getElementById("oPincode").value = document.getElementById("oPincode").value.trim();
var cmpNov = document.getElementById("oNvol").value = document.getElementById("oNvol").value.trim();
var cmpPoc = document.getElementById("oPoc").value = document.getElementById("oPoc").value.trim();
var cmdPom = document.getElementById("oPom").value = document.getElementById("oPom").value.trim();
var cmpPVolSelect = document.querySelector('input[name="oPvolY"]:checked');
var oPoE = document.getElementById("oPoE").value = document.getElementById("oPoE").value.trim();
var oPod = $("#oPod").val().trim();
if (cmpName == ""|| cmpName == undefined ) {
$("#ngoOrgNameError").text("தயவுசெய்து நிறுவனத்தின் பெயரை உள்ளிடவும்");
isValid = false;
}
if(ngoOrgEmail!=""){
if (!emailPattern.test(ngoOrgEmail)) {
$("#ngoOrgEmailError").text("சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
isValid = false;
}
}
if (cmpAddress == undefined || cmpAddress == "") {
$("#oAddressError").text("தயவுசெய்து நிறுவனத்தின் முகவரியை உள்ளிடவும்.");
isValid = false;
}
if (cmpPincode == undefined || cmpPincode == "") {
$("#oPincodeError").text("தயவுசெய்து அஞ்சல் குறியீட்டை உள்ளிடவும். ");
isValid = false;
}
if (cmpNov == undefined || cmpNov == "") {
$("#oNvolError").text("தயவுசெய்து தன்னார்வலர்களின் எண்ணிக்கையை உள்ளிடவும்.");
isValid = false;
}
if (!/^[1-9]\d*$/.test(cmpNov)) {
$("#oNvolError").text("சரியான எண்ணிக்கையிலான தன்னார்வலர்களை உள்ளிடவும்.");
isValid = false;
}
if (cmpPoc == undefined || cmpPoc == "") {
$("#oPocError").text("நடத்தைக்கான பொறுப்பாளர் பெயரை உள்ளிடவும்.");
isValid = false;
}
if (oPod == "") {
$("#oPodError").text("நடத்தைக்கான பொறுப்பாளர் பதவியைக் குறிப்பிடவும்");
isValid = false;
}
if (oPoE === "" || !emailPattern.test(oPoE)) {
$("#oPoeError").text("தொடர்பு கொள்ள வேண்டியவருக்கான சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
isValid = false;
}
if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
$("#oPomError").text("தொடர்பு கொள்ள வேண்டியவரின் செல்லுபடியாகும் அலைபேசி எண்ணை உள்ளிடவும்.");
isValid = false;
}
if (!/^\d{10}$/.test(cmdPom)) {
$("#oPomError").text("தொலைபேசி எண்ணில் சரியாக 10 இலக்கங்கள் இருக்க வேண்டும்.");
isValid = false;
} if (!/^[6-9]/.test(cmdPom)) {
$("#oPomError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்.");
isValid = false;
} if (/^(\d)\1{9}$/.test(cmdPom)) {
$("#oPomError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
isValid = false;
} if (
cmdPom === "1234567890" ||
cmdPom === "0123456789" ||
cmdPom === "9876543210" ||
cmdPom === "0987654321"
) {
$("#oPomError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
isValid = false;
}
if (!cmpPVolSelect) {
$("#oPvolYError").text("தயவுசெய்து முந்தைய தன்னார்வலர்களின் விவரங்களைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
var c2mobile = $.trim($("#oPom").val());
if(c2mobile !== "" && ephno !== "" && c2mobile === ephno){
Swal.fire({
title: "Warning!",
text: "கைபேசி எண்ணும் அவசரக்காலத் தொலைபேசி எண்ணும் ஒன்றாக இருக்கக்கூடாது",
icon: "warning",
confirmButtonText: "OK"
});
isValid = false;
}
if (i == 0) {
alert("விருப்பமான பகுதி விவரங்களைத் தேர்ந்தெடுக்கவும்.");
isValid = false;
}
if (isValid) {
$("#submitBtn").prop("disabled", true);
saveNGODetails();
return false;
}
else{
var firstError = $(".text-danger")
.filter(function () {
return $.trim($(this).text()) !== "";
})
.first();
if (firstError.length) {
var target = firstError
.closest(".mb-3")
.find("input, select, textarea")
.first();
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - 120
}, 600);
// Focus the field
target.focus();
}else {
// Fallback to error message
$("html, body").animate({
scrollTop: firstError.offset().top - 120
}, 600);
}
}
}
return false;
}
return isValid; // Prevent default form submit in all cases
}
function saveTheIndividualForm() {
var preferredAreas = [];
$(".zone-checkbox:checked").each(function () {
preferredAreas.push($(this).val());
});
// Create JSON object with form data
var volunteerData = {
category:$("#category option:selected").data("category"),
subCategory: $("#subcategory option:selected").data("sub-category"),
name: $("#name").val(),
email: $("#email").val(),
dob: $("#dob").val(),
gender: $("input[name='gender']:checked").val(),
mobile_no: $("#mobile").val(),
//landline_no: $("#landline").val(),
district: $("#district").val(),
address: $("#address").val(),
pin_code: $("#pincode").val(),
//degree: $("#edu").val(),
//college_name: $("#college").val(),
//vol_nss: $("input[name='nss']:checked").val(),
//vol_ncc: $("input[name='ncc']:checked").val(),
//occupation: $("#occupation").val(),
//designation: $("#designation").val(),
//ngo_associated: $("#ngoAny").val(),
previous_volunteered: $("input[name='preVol']:checked").val(),
// Add more fields if needed
referBy: $("#ref").val(),
//aadhar: $("#aadhar").val(),
//bloodgroup: $("#bloodgroup").val(),
preferredAreas: preferredAreas,
expertise_area:$("#expertise").val(),
other_expertise:$("#other_expertise").val(),
ephno:$("#ephno").val(),
doc_type:$.trim($("#docs").val()),
doc_number:$.trim($("#doc_number").val()),
};
// Create FormData
var formData = new FormData();
// Add JSON data as Blob
formData.append(
"volunteer",
new Blob(
[JSON.stringify(volunteerData)],
{ type: "application/json" }
)
);
// Add file
var docFile = $("#doc_url")[0].files[0];
if (docFile) {
formData.append("doc_url", docFile);
}
$('#loader').show();
// Send AJAX POST request
$.ajax({
type: "POST",
url: "/volunteer/api/register",
data: formData,
// IMPORTANT
processData: false,
contentType: false,
beforeSend: function() {
$("#pageLoader").show();
},
success: function (response) {
$('#loader').hide();
successPopup(response);
},
error: function (xhr) {
$('#loader').hide();
console.log("Error status:", xhr.status);
console.log("Error response:", xhr.responseText);
if (xhr.status === 409) {
var response = xhr.responseJSON;
Swal.fire({
title: "Warning!",
text: response && response.message
? response.message
: "This mobile number is already registered",
icon: "warning",
confirmButtonText: "OK"
});
} else {
Swal.fire({
title: "Error!",
text: "Unable to save registration. Please try again.",
icon: "error",
confirmButtonText: "OK"
});
}
// Allow user to submit again
$("#submitBtn").prop("disabled", false);
},
complete: function () {
// Re-enable the submit button after completion (either success or error)
$("#pageLoader").hide();
}
});
return false;
}
function saveCorporateDetails() {
var preferredAreas = [];
$(".zone-checkbox:checked").each(function () {
preferredAreas.push($(this).val());
});
var copInfo = {
category:$("#category option:selected").data("category"),
subCategory: $("#subcategory option:selected").data("sub-category"),
compName: $("#cmpName").val(),
compEmail: $("#cmpEmail").val(),
landline: $("#cmpLandline").val(),
mobileNo: $("#cmpMobile").val(),
district: $("#cmpDistrict").val(),
address: $("#cmpAddress").val(),
pinCode: $("#cmpPincode").val(),
no_of_vol: $("#cmpNov").val(),
contactPerson: $("#cmpPoc").val(),
contactPerMobile: $("#cmdPom").val(),
cntPerEmail: $("#cmdPoE").val(),
cntPerDesign: $("#cmdPod").val(),
previous_volunteered: $("input[name='cmpPVol']:checked").val(),
referBy: $("#ref").val(),
preferredAreas: preferredAreas,
expertise_area:$("#expertise").val(),
other_expertise:$("#other_expertise").val(),
ephno:$("#ephno").val(),
}
$('#loader').show();
$.ajax({
type: "POST",
url: "/volunteer/api/registerAsCorporate",
contentType: "application/json",
data: JSON.stringify(copInfo),
beforeSend: function() {
$("#pageLoader").show();
},
success: function (response) {
$('#loader').hide();
successPopup(response);
},
error: function (xhr) {
$('#loader').hide();
console.log("Error status:", xhr.status);
console.log("Error response:", xhr.responseText);
if (xhr.status === 409) {
var response = xhr.responseJSON;
Swal.fire({
title: "Warning!",
text: response && response.message
? response.message
: "This mobile number is already registered",
icon: "warning",
confirmButtonText: "OK"
});
} else {
Swal.fire({
title: "Error!",
text: "Unable to save registration. Please try again.",
icon: "error",
confirmButtonText: "OK"
});
}
// Allow user to submit again
$("#submitBtn").prop("disabled", false);
},
complete: function () {
// Re-enable the submit button after completion (either success or error)
$("#pageLoader").hide();
},
});
return false;
}
function saveNGODetails() {
var preferredAreas = [];
$(".zone-checkbox:checked").each(function () {
preferredAreas.push($(this).val());
});
var ngoInfo = {
category:$("#category option:selected").data("category"),
subCategory: $("#subcategory option:selected").data("sub-category"),
orgName: $("#ngoOrgName").val(),
orgEmail: $("#ngoOrgEmail").val(),
/* landline: $("#oLandline").val(),
mobileNo: $("#oMobile").val(), */
district: $("#oDistrict").val(),
address: $("#oAddress").val(),
pinCode: $("#oPincode").val(),
no_of_vol: $("#oNvol").val(),
contactPerson: $("#oPoc").val(),
mobileNo: $("#oPom").val(),
cntPerEmail: $("#oPoE").val(),
cntPerDesign: $("#oPod").val(),
previous_volunteered: $("input[name='oPvolY']:checked").val(),
referBy: $("#ref").val(),
preferredAreas: preferredAreas,
expertise_area:$("#expertise").val(),
other_expertise:$("#other_expertise").val(),
ephno:$("#ephno").val(),
}
$('#loader').show();
$.ajax({
type: "POST",
url: "/volunteer/api/registerAsNgo",
contentType: "application/json",
data: JSON.stringify(ngoInfo),
beforeSend: function() {
$("#pageLoader").show();
},
success: function (response) {
$('#loader').hide();
successPopup(response);
},
complete: function () {
// Re-enable the submit button after completion (either success or error)
$("#pageLoader").hide();
},
});
return false;
}
function successPopup(id) {
$("#submitBtn").prop("disabled", true);
Swal.fire({
title: "Good job!",
text: "Thank you for registering as a volunteer \nwith the Greater Chennai Corporation for monsoon support! \nYour registration is successful, and your reference number is [GCC-" + id + "]. \nYou will be contacted once the final listing is complete and deployment details \nare confirmed. Together, we can help Chennai stay safe this monsoon",
icon: "success",
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false
}).then((result) => {
if (result.isConfirmed) {
window.location.href = "https://chennaicorporation.gov.in/gcc/"; // Redirect to the desired URL
}
});
}
//script for otp
$(document).ready(function () {
// Event listener for Send OTP button
$('#sendOtpButton').click(function (event) {
event.preventDefault();
// Get the entered mobile number
const mobileNumber = $('#mobile').val();
// Basic check to ensure mobile number is entered
if (mobileNumber.length === 10) {
// Display the mobile number in the OTP modal
$("#mobilenotxt").html(mobileNumber);
$.ajax({
type: "GET",
url: '/volunteer/api/registration/sendOTP',
data: {'mobile': mobileNumber, 'purpose': 'New User'}, // Pass mobile number and purpose
dataType: 'json',
success: function (response) {
if (response === "Error: This number is not registered.") {
// Show an alert if the number is not registered
alert("This number is not registered.");
} else if (response !== "Error") {
// Bootstrap 4 Modal Handling
$('#otpForm').modal('show');
// On successful OTP send, enable the verified button and update its state
//$('#verifiedOTP').prop('disabled', false).css('display', 'block');
// Start countdown for resend OTP
var timeleft = 60;
var resendTimeout;
var countdown = $("#countdown");
// Display countdown
$("#resendlink").html('Please wait.. <span id="countdown">60</span>s');
resendTimeout = setInterval(function () {
timeleft--;
countdown.text(timeleft);
// When countdown finishes, enable Resend OTP link
if (timeleft <= 0) {
clearInterval(resendTimeout);
$("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP();">Resend OTP</a>');
}
}, 1000);
} else {
alert("OTP not sent. Please try again.");
}
},
error: function () {
alert("This number is not registered.");
}
});
} else {
alert("Please enter a valid 10-digit mobile number.");
}
});
});
// For OTP input box
$('.otp-input').on('keyup', function (e) {
var $this = $(this);
if ($this.val().length === 1) {
$this.next('.otp-input').focus();
}
if ($this.val().length === 0) {
$this.prev('.otp-input').focus();
}
});
// Verify OTP function
function verifyOtp() {
var otpInputs = $('.otp-input');
var otpValue = '';
otpInputs.each(function () {
otpValue += $(this).val();
});
$.ajax({
type: "GET",
url: '/volunteer/api/registration/verifyOTP',
data: {'otp': otpValue},
dataType: 'text',
success: function (bodyMessage) {
if (bodyMessage.trim() === "Success") {
// SweetAlert for success
Swal.fire({
title: "OTP Verified!",
text: "Your OTP has been successfully verified.",
icon: "success",
confirmButtonText: "OK"
}).then(() => {
$('#otpForm').modal('hide'); // Hide the OTP modal
$('#sendOtpButton').prop('disabled', true).css('display', 'none');
$('#verifiedOTP').prop('disabled', false).css('display', 'block');
});
} else {
// SweetAlert for failure
Swal.fire({
title: "OTP Incorrect",
text: "The OTP you entered is incorrect. Please try again.",
icon: "error",
confirmButtonText: "Retry"
});
}
},
error: function () {
// SweetAlert for server error
Swal.fire({
title: "Error",
text: "There was an issue verifying your OTP. Please try again later.",
icon: "error",
confirmButtonText: "OK"
});
}
});
return false; // Prevent form submission
}
//to set dob
function setMaxDate() {
const today = new Date();
const formattedDate = today.toISOString().split('T')[0]; // Format date as YYYY-MM-DD
document.getElementById('dob').setAttribute('max', formattedDate);
}
function validateAge() {
const dobInput = document.getElementById('dob');
const dobError = document.getElementById('dobError');
const dobValue = new Date(dobInput.value);
const today = new Date();
// Calculate the age
const age = today.getFullYear() - dobValue.getFullYear();
const monthDifference = today.getMonth() - dobValue.getMonth();
// Adjust age if the birthday hasn't occurred yet this year
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < dobValue.getDate())) {
age--;
}
if (age < 18) {
alert("You must be at least 18 years old."); // Popup alert
dobInput.value = ''; // Clear the input if age is under 18
} else {
dobError.textContent = ""; // Clear error message
}
}
// Call setMaxDate when the page loads
window.onload = setMaxDate;
//script for submit
//to validate aadhar
function validateAadhar() {
const aadharInput = document.getElementById('aadhar');
const aadharError = document.getElementById('aadharError');
const aadharValue = aadharInput.value;
// Check if the input length is 12
if (aadharValue.length === 12) {
aadharError.textContent = ''; // Clear the error
} else {
aadharError.textContent = 'Aadhar number must be exactly 12 digits.';
}
}
</script>
</body>
</html>