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.
 
 
 
 
 

1236 lines
43 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>GCC - Volunteers</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- SweetAlert CSS -->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
-->
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- SweetAlert JS -->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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%;
}
.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;
}
</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>
<!-- Header Section -->
<div class="header">
<!-- Left Logo -->
<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>
<!-- Center Menu -->
<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>
<div class="container mt-5">
<form onsubmit="return validateForm();">
<!-- Dropdowns for selecting category and subcategory -->
<!-- Bootstrap Card for displaying uploaded details -->
<div class="card" style="background-color: white;">
<div class="card-header text-center" style="color: #1d4859;">
<h3>Volunteer Information</h3>
</div>
<div class="card-body">
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="category">Choose 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-6 col-md-12 mb-3">
<label for="subcategory">Choose Sub Category<span class="req">*</span></label>
<select class="form-control" id="subcategory">
</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>Contact Details</h3>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="name">Name<span class="req">*</span></label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
<span class="text-danger" id="nameError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter Email">
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="dob">DOB <span class="req">*</span></label>
<input type="date" class="form-control" id="dob">
<span class="text-danger" id="dobError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="gender">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">Male</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div class="radio-item">
<input type="radio" id="others" name="gender" value="others">
<label for="others">Others</label>
</div>
</div>
<span class="text-danger" id="genderError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="mobile">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="Enter Whatsapp Mobile Number" aria-label="Mobile"
aria-describedby="basic-addon1">
</div>
<span class="text-danger" id="mobileError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 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-6 col-md-12 mb-3">
<label for="district">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-6 col-md-12 mb-3">
<label for="address">Address<span class="req">*</span></label>
<input type="text" class="form-control" id="address" placeholder="Enter Address...">
<span class="text-danger" id="addressError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="pincode">Pincode<span class="req">*</span></label>
<input type="text" class="form-control" minlength="6" maxlength="6" pattern="[0-9]{6}"
id="pincode" placeholder="Enter Pincode...">
<span class="text-danger" id="pincodeError"></span>
</div>
</div>
<h3>Education Qualification Details</h3>
<div class="form-row mb-4">
<div class="col-lg-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 col-md-12 mb-3">
<label for="prevol">Have you previously Volunteered In any Emergency Situation?<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">Yes</label>
</div>
<div class="radio-item">
<input type="radio" id="preVolN" name="preVol" value="false">
<label for="preVolN">No</label>
</div>
</div>
<span class="text-danger" id="prevolError"></span>
</div>
</div>
</div>
<!-- Individual Form -->
<!-- Corporate Form -->
<div class="corporate-form" id="corporate">
<h3>Contact Details</h3>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmpName">Company Name<span class="req">*</span></label>
<input type="text" class="form-control" id="cmpName" placeholder="Enter Company Name">
<span class="text-danger" id="cmpNameError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmpEmail">Company Email ID</label>
<input type="text" class="form-control" id="cmpEmail"
placeholder="Enter Company Email ID">
</div>
</div>
<div class="form-row mb-4" style="display:none;">
<div class="col-lg-6 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-6 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-6 col-md-12 mb-3">
<label for="cmpDistrict">District</label>
<input type="text" class="form-control" id="cmpDistrict" value="Chennai" disabled>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmpAddress">Address<span class="req">*</span></label>
<input type="text" class="form-control" id="cmpAddress" placeholder="Enter Address...">
<span class="text-danger" id="cmpAddressError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmpPincode">Pincode<span class="req">*</span></label>
<input type="text" class="form-control" id="cmpPincode" minlength="6" maxlength="6"
pattern="[0-9]{6}" placeholder="Enter Pincode...">
<span class="text-danger" id="cmpPincodeError"></span>
</div>
</div>
<h4 class="">No of volunteers from your Company<span class="req">*</span></h4>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<input type="number" class="form-control" id="cmpNov">
<span class="text-danger" id="cmpNovError"></span>
</div>
</div>
<h4>Point of Contact</h4>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmpPoc">Name<span class="req">*</span></label>
<input type="text" class="form-control" id="cmpPoc">
<span class="text-danger" id="cmpPocError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmdPod">Designation<span class="req">*</span></label>
<input type="text" class="form-control" id="cmdPod" placeholder="Enter Designation...">
<span class="text-danger" id="cmdPodError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmdPoE">Email ID<span class="req">*</span></label>
<input type="text" class="form-control" id="cmdPoE" placeholder="Enter Email ID...">
<span class="text-danger" id="cmdPoEError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="cmdPom">Phone No<span class="req">*</span></label>
<input type="number" class="form-control" id="cmdPom" placeholder="Enter Mobile No...">
<span class="text-danger" id="cmdPomError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="comprevol">Has your Company previously Volunteered In any Emergency
Situation?
*</label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="cmpVolY" name="cmpPVol" value="true" checked>
<label for="cmpVolY">Yes</label>
</div>
<div class="radio-item">
<input type="radio" id="cmpVolN" name="cmpPVol" value="false">
<label for="cmpVolN">No</label>
</div>
</div>
<span class="text-danger" id="comprevolError"></span>
</div>
</div>
</div>
<!-- Corporate Form -->
<!-- NGO Form -->
<div class="ngo-form" id="ngo">
<h3>Contact Details</h3>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 col-sm-12 mb-3">
<label for="ngoOrgName">Organization Name<span class="req">*</span></label>
<input type="text" class="form-control" id="ngoOrgName" placeholder="Enter Name">
<span class="text-danger" id="ngoOrgNameError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="ngoOrgEmail">Company Email ID</label>
<input type="text" class="form-control" id="ngoOrgEmail" placeholder="Enter Email ID">
</div>
</div>
<div class="form-row mb-4" style="display:none;">
<div class="col-lg-6 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-6 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-6 col-md-12 mb-3">
<label for="oDistrict">District</label>
<input type="text" class="form-control" id="oDistrict" value="Chennai" disabled>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="oAddress">Address<span class="req">*</span></label>
<input type="text" class="form-control" id="oAddress" placeholder="Enter Address...">
<span class="text-danger" id="oAddressError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="oPincode">Pincode<span class="req">*</span></label>
<input type="picode" class="form-control" id="oPincode" minlength="6" maxlength="6"
pattern="[0-9]{6}" placeholder="Enter Pincode...">
<span class="text-danger" id="oPincodeError"></span>
</div>
</div>
<h4 class="volorg">No of volunteers from your Organization<span class="req">*</span></h4>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<input type="number" class="form-control" id="oNvol">
<span class="text-danger" id="oNvolError"></span>
</div>
</div>
<h4>Point of Contact</h4>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="oPoc">Name<span class="req">*</span></label>
<input type="text" class="form-control" id="oPoc" placeholder="Person Name">
<span class="text-danger" id="oPocError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="oPod">Designation<span class="req">*</span></label>
<input type="text" class="form-control" id="oPod" placeholder="Enter Designation...">
<span class="text-danger" id="oPodError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="oPoe">Email ID<span class="req">*</span></label>
<input type="text" class="form-control" id="oPoE" placeholder="Enter Email ID...">
<span class="text-danger" id="oPoeError"></span>
</div>
<div class="col-lg-6 col-md-12 mb-3">
<label for="oPom">Phone No<span class="req">*</span></label>
<input type="number" class="form-control" id="oPom" placeholder="Enter Phone No...">
<span class="text-danger" id="oPomError"></span>
</div>
</div>
<div class="form-row mb-4">
<div class="col-lg-6 col-md-12 mb-3">
<label for="oPvolY">Has your Organization previously Volunteered In any Emergency
Situation?<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">Yes</label>
</div>
<div class="radio-item">
<input type="radio" id="oPvolN" name="oPvolY" value="false">
<label for="female">No</label>
</div>
</div>
<span class="text-danger" id="oPvolYError"></span>
</div>
</div>
</div>
<!-- NGO Form -->
<!-- Preferred area of work checkboxes -->
<h5>Preferred area of work<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">Any area in Chennai</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-3">
<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">Zone 1 (Thiruvottiyur)</label>
</div>
</div>
<div class="col-3">
<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">Zone 2 (Manali)</label>
</div>
</div>
<div class="col-3">
<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">Zone 3 (Madhavaram)</label>
</div>
</div>
<div class="col-3">
<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">Zone 4 (Tondiarpet)</label>
</div>
</div>
</div>
<!-- Second Row of Zones -->
<div class="form-row mt-2">
<div class="col-3">
<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">Zone 5 (Royapuram)</label>
</div>
</div>
<div class="col-3">
<div class="form-check">
<input class="form-check-input zone-checkbox" type="checkbox" id="zone6"
name="zone6" value="6-Thiru-Vi-Ka Nagar" onclick="checkAnyArea()">
<label class="zone-checkbox-label" for="zone6">Zone 6 (Thiru-Vi-Ka Nagar)</label>
</div>
</div>
<div class="col-3">
<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">Zone 7 (Ambattur)</label>
</div>
</div>
<div class="col-3">
<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">Zone 8 (Anna Nagar)</label>
</div>
</div>
</div>
<!-- Third Row of Zones -->
<div class="form-row mt-2">
<div class="col-3">
<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">Zone 9 (Teynampet)</label>
</div>
</div>
<div class="col-3">
<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">Zone 10 (Kodambakkam)</label>
</div>
</div>
<div class="col-3">
<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">Zone 11 (Valasarvakkam)</label>
</div>
</div>
<div class="col-3">
<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">Zone 12 (Alandur)</label>
</div>
</div>
</div>
<!-- Fourth Row of Zones -->
<div class="form-row mt-2">
<div class="col-3">
<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">Zone 13 (Adyar)</label>
</div>
</div>
<div class="col-3">
<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">Zone 14 (Perungudi)</label>
</div>
</div>
<div class="col-3">
<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">Zone 15 (Sholinganallur)</label>
</div>
</div>
</div>
</div>
<center>
<button type="submit" class="btn btn-primary">Submit</button>
</center>
</div>
</div>
</form>
</div>
<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>`;
}
}
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").value;
if (category == undefined || category === "-1") {
$("#categoryError").text("Please Select Category");
isValid = false;
}
if (category === "Individual") {
var subcategory = document.getElementById("subcategory").value;
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();
if (subcategory == -1) {
$("#subcategoryError").text("Please Select SubCategory !");
isValid = false;
}
if (name == undefined || name == "") {
$("#nameError").text("Please Enter Name !");
isValid = false;
}
if (dob == undefined || dob == "") {
$("#dobError").text("Please enter a Date of birth");
isValid = false;
}
if (!genderSelected) {
$("#genderError").text("Please Select Gender !");
isValid = false;
}
if (mobile === "" || !mobilePattern.test(mobile)) {
$("#mobileError").text("Please enter a valid 10-digit mobile number");
isValid = false;
}
if (address == undefined || address == "") {
$("#addressError").text("Please Enter address !");
isValid = false;
}
// Pincode validation
if (pincode === "" || !pincodePattern.test(pincode)) {
$("#pincodeError").text("Please enter a valid 6-digit pincode");
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 (!nssSelected) {
$("#nssError").text("Please Select NSS details !");
isValid = false;
}
if (!nccSelected) {
$("#nccError").text("Please Select NCC details !");
isValid = false;
}
/* if( occupation == undefined ||occupation == ""){
alert("Please Enter Occupation details !");
return false;
}
if(designation == undefined || designation == ""){
alert("Please Enter Designation details !");
return false;
} */
if (!preVolSelected) {
$("#prevolError").text("Please Select Previous Volunteer details !");
isValid = false;
}
if (ngoAny == undefined || ngoAny == "") {
$("#ngoAnyError").text("Please Enter Company/NGO details !");
isValid = false;
}
if (i == 0) {
$("#anyAreaError").text("Please select Preferred Area details !");
isValid = false;
}
if (isValid) {
saveTheIndividualForm();
}
return false;
}
else if (category === "Corporate") {
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();
if (cmpName == undefined || cmpName == "") {
$("#cmpNameError").text("Please Enter Company Name");
isValid = false;
}
if (cmpAddress == undefined || cmpAddress == "") {
$("#cmpAddressError").text("Please Enter Company Address");
isValid = false;
}
if (cmpPincode == undefined || cmpPincode == "") {
$("#cmpPincodeError").text("Please Enter Pincode ");
isValid = false;
}
if (cmpNov == undefined || cmpNov == "") {
$("#cmpNovError").text("Please Enter No of Volunteer");
isValid = false;
}
if (cmpPoc == undefined || cmpPoc == "") {
$("#cmpPocError").text("Please Enter Point of Conduct Name");
isValid = false;
}
if (cmdPoE === "" || !emailPattern.test(cmdPoE)) {
$("#cmdPoEError").text("Please enter Point of Conduct a valid Email ID");
isValid = false;
}
if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
$("#cmdPomError").text("Please enter Point of Conduct Valid Mobile No");
isValid = false;
}
if (!cmpPVolSelect) {
$("#anyAreaError").text("Please Select previous volunteers details");
isValid = false;
}
if (i == 0) {
alert("Please select Preferred Area details !");
isValid = false;
}
if (isValid) {
saveCorporateDetails();
}
return false;
}
else if (category === "NGO") {
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();
if (cmpName == undefined || cmpName == "") {
$("#ngoOrgNameError").text("Please Enter Organisation Name");
isValid = false;
}
if (cmpAddress == undefined || cmpAddress == "") {
$("#oAddressError").text("Please Enter Organisation Address");
isValid = false;
}
if (cmpPincode == undefined || cmpPincode == "") {
$("#oPincodeError").text("Please Enter Pincode ");
isValid = false;
}
if (cmpNov == undefined || cmpNov == "") {
$("#oNvolError").text("Please Enter No of Volunteer");
isValid = false;
}
if (cmpPoc == undefined || cmpPoc == "") {
$("#oPocError").text("Please Enter Point of Conduct Name");
isValid = false;
}
if (oPoE === "" || !emailPattern.test(oPoE)) {
$("#oPoeError").text("Please enter Point of Conduct valid Email ID");
isValid = false;
}
if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
$("#oPomError").text("Please Enter Point of Conduct Mobile No");
isValid = false;
}
if (!cmpPVolSelect) {
$("#oPvolYError").text("Please Select previous volunteers details");
isValid = false;
}
if (i == 0) {
alert("Please select Preferred Area details !");
isValid = false;
}
if (isValid) {
saveNGODetails();
}
return false;
}
return false;
}
function saveTheIndividualForm() {
var preferredAreas = [];
$(".zone-checkbox:checked").each(function () {
preferredAreas.push($(this).val());
});
// Create JSON object with form data
var volunteerData = {
category: $("#category").val(),
subCategory: $("#subcategory").val(),
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(),
preferredAreas: preferredAreas
};
// Send AJAX POST request
$.ajax({
type: "POST",
url: "/volunteer/api/register",
contentType: "application/json",
data: JSON.stringify(volunteerData),
success: function (response) {
successPopup(response);
},
error: function (error) {
alert("Error saving data!");
console.log(error);
}
});
return false;
}
function saveCorporateDetails() {
var preferredAreas = [];
$(".zone-checkbox:checked").each(function () {
preferredAreas.push($(this).val());
});
var copInfo = {
category: $("#category").val(),
subCategory: $("#subcategory").val(),
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
}
$.ajax({
type: "POST",
url: "/volunteer/api/registerAsCorporate",
contentType: "application/json",
data: JSON.stringify(copInfo),
success: function (response) {
successPopup(response);
},
error: function (error) {
alert("Error saving data!");
console.log(error);
}
});
return false;
}
function saveNGODetails() {
var preferredAreas = [];
$(".zone-checkbox:checked").each(function () {
preferredAreas.push($(this).val());
});
var ngoInfo = {
category: $("#category").val(),
subCategory: $("#subcategory").val(),
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(),
contactPerMobile: $("#oPom").val(),
cntPerEmail: $("#oPoE").val(),
cntPerDesign: $("#oPod").val(),
previous_volunteered: $("input[name='oPvolY']:checked").val(),
referBy: $("#ref").val(),
preferredAreas: preferredAreas
}
$.ajax({
type: "POST",
url: "/volunteer/api/registerAsNgo",
contentType: "application/json",
data: JSON.stringify(ngoInfo),
success: function (response) {
successPopup(response);
},
error: function (error) {
alert("Error saving data!");
console.log(error);
}
});
return false;
}
function successPopup(id) {
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"
}).then((result) => {
if (result.isConfirmed) {
window.location.href = "https://chennaicorporation.gov.in/gcc/"; // Redirect to the desired URL
}
});
}
</script>
</body>
</html>