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