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.

1235 lines
43 KiB

2 years ago
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>GCC - Volunteers</title>
  6. <!-- Bootstrap CSS -->
  7. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  9. <!-- SweetAlert CSS -->
  10. <!--
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
  12. -->
  13. <!-- Bootstrap JS -->
  14. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  16. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  17. <!-- SweetAlert JS -->
  18. <!--
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
  20. -->
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  22. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  23. <style>
  24. /*for radio button style*/
  25. .radio-group {
  26. display: flex;
  27. align-items: center;
  28. /* Ensures all items are aligned to the center */
  29. }
  30. .radio-item {
  31. display: flex;
  32. align-items: center;
  33. margin-right: 20px;
  34. /* Adds space between each radio item */
  35. }
  36. .radio-item input[type="radio"] {
  37. margin-right: 10px;
  38. /* Adds space between the radio button and its label */
  39. vertical-align: middle;
  40. /* Ensures vertical alignment */
  41. }
  42. .radio-item label {
  43. margin: 0;
  44. /* Removes any default margins that might affect alignment */
  45. }
  46. /*for radio button style*/
  47. /*checkbox style*/
  48. .zone-checkbox-label {
  49. display: inline-block;
  50. padding: 10px 15px;
  51. border: 1px solid #ccc;
  52. border-radius: 8px;
  53. background-color: #f8f9fa;
  54. font-size: 16px;
  55. cursor: pointer;
  56. text-align: center;
  57. width: 100%;
  58. }
  59. .zone-checkbox {
  60. margin-right: 10px;
  61. }
  62. .form-check {
  63. display: flex;
  64. align-items: center;
  65. margin-bottom: 10px;
  66. }
  67. .form-check-input {
  68. transform: scale(1.5);
  69. }
  70. /*checkbox style*/
  71. label {
  72. color: #858585;
  73. }
  74. /* Header Styling */
  75. .header {
  76. background-color: #1d495a;
  77. padding: 10px 20px;
  78. display: flex;
  79. align-items: center;
  80. justify-content: space-between;
  81. color: white;
  82. font-family: Arial, sans-serif;
  83. }
  84. .header .logo {
  85. display: flex;
  86. align-items: center;
  87. }
  88. .header .logo img {
  89. height: 60px;
  90. }
  91. .header .menu {
  92. display: flex;
  93. justify-content: center;
  94. align-items: center;
  95. flex-grow: 1;
  96. margin-left: 20px;
  97. }
  98. .header .menu a {
  99. color: white;
  100. margin: 0 15px;
  101. text-decoration: none;
  102. }
  103. .header .menu a:hover {
  104. text-decoration: underline;
  105. }
  106. .req {
  107. color: red;
  108. }
  109. </style>
  110. </head>
  111. <body style="background-color: #ebf1fa;">
  112. <h1 style="display: none;">GCC Volunteers</h1>
  113. <h1 style="display: none;">GCC Volunteers Registration</h1>
  114. <h1 style="display: none;">Chennai Volunteers </h1>
  115. <h1 style="display: none;">Volunteers </h1>
  116. <!-- Header Section -->
  117. <div class="header">
  118. <!-- Left Logo -->
  119. <div class="logo">
  120. <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Greater Chennai Corporation Logo">
  121. <span class="ml-2">GREATER CHENNAI CORPORATION</span>
  122. </div>
  123. <!-- Center Menu -->
  124. <div class="menu">
  125. <a href="https://chennaicorporation.gov.in/gcc/">Home</a>
  126. <a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a>
  127. <a href="https://chennaicorporation.gov.in/gcc/who-is-who/index_data.jsp">Who'sWho</a>
  128. <a href="https://chennaicorporation.gov.in/gcc/council/about-council/">Council</a>
  129. <a href="https://chennaicorporation.gov.in/gcc/tender/">Tender</a>
  130. <a href="https://chennaicorporation.gov.in/gcc/department/">Departments</a>
  131. <a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a>
  132. </div>
  133. </div>
  134. <div class="container mt-5">
  135. <form onsubmit="return validateForm();">
  136. <!-- Dropdowns for selecting category and subcategory -->
  137. <!-- Bootstrap Card for displaying uploaded details -->
  138. <div class="card" style="background-color: white;">
  139. <div class="card-header text-center" style="color: #1d4859;">
  140. <h3>Volunteer Information</h3>
  141. </div>
  142. <div class="card-body">
  143. <div class="form-row mb-4">
  144. <div class="col-lg-6 col-md-12 mb-3">
  145. <label for="category">Choose Category<span class="req">*</span></label>
  146. <select class="form-control" id="category" onchange="handleCategoryChange()">
  147. <option value="-1">Select</option>
  148. <option value="Individual">Individual</option>
  149. <option value="Corporate">Corporate</option>
  150. <option value="NGO">NGO/Other Associations</option>
  151. </select>
  152. <span class="text-danger" id="categoryError"></span>
  153. </div>
  154. <div class="col-lg-6 col-md-12 mb-3">
  155. <label for="subcategory">Choose Sub Category<span class="req">*</span></label>
  156. <select class="form-control" id="subcategory">
  157. </select>
  158. <span class="text-danger" id="subcategoryError"></span>
  159. </div>
  160. </div>
  161. <input type="hidden" class="form-control" id="ref" th:value="${ref}">
  162. <!-- Individual Form -->
  163. <div class="individual-form" id="individual">
  164. <h3>Contact Details</h3>
  165. <div class="form-row mb-4">
  166. <div class="col-lg-6 col-md-12 mb-3">
  167. <label for="name">Name<span class="req">*</span></label>
  168. <input type="text" class="form-control" id="name" placeholder="Enter Name">
  169. <span class="text-danger" id="nameError"></span>
  170. </div>
  171. </div>
  172. <div class="form-row mb-4">
  173. <div class="col-lg-6 col-md-12 mb-3">
  174. <label for="email">Email</label>
  175. <input type="text" class="form-control" id="email" placeholder="Enter Email">
  176. </div>
  177. <div class="col-lg-6 col-md-12 mb-3">
  178. <label for="dob">DOB <span class="req">*</span></label>
  179. <input type="date" class="form-control" id="dob">
  180. <span class="text-danger" id="dobError"></span>
  181. </div>
  182. </div>
  183. <div class="form-row mb-4">
  184. <div class="col-lg-6 col-md-12 mb-3">
  185. <label for="gender">Gender<span class="req">*</span></label>
  186. <div class="radio-group">
  187. <div class="radio-item">
  188. <input type="radio" id="male" name="gender" value="male" checked>
  189. <label for="male">Male</label>
  190. </div>
  191. <div class="radio-item">
  192. <input type="radio" id="female" name="gender" value="female">
  193. <label for="female">Female</label>
  194. </div>
  195. <div class="radio-item">
  196. <input type="radio" id="others" name="gender" value="others">
  197. <label for="others">Others</label>
  198. </div>
  199. </div>
  200. <span class="text-danger" id="genderError"></span>
  201. </div>
  202. <div class="col-lg-6 col-md-12 mb-3">
  203. <label for="mobile">Mobile<span class="req">*</span></label>
  204. <div class="input-group mb-3">
  205. <div class="input-group-prepend">
  206. <span class="input-group-text" id="basic">+91</span>
  207. </div>
  208. <input type="text" class="form-control" id="mobile"
  209. placeholder="Enter Whatsapp Mobile Number" aria-label="Mobile"
  210. aria-describedby="basic-addon1">
  211. </div>
  212. <span class="text-danger" id="mobileError"></span>
  213. </div>
  214. </div>
  215. <div class="form-row mb-4">
  216. <div class="col-lg-6 col-md-12 mb-3">
  217. <label for="phone">Phone</label>
  218. <div class="input-group mb-3">
  219. <div class="input-group-prepend">
  220. <span class="input-group-text" id="basic2">044</span>
  221. </div>
  222. <input type="text" class="form-control" id="landline"
  223. placeholder="Enter Landline Number" aria-label="Mobile"
  224. aria-describedby="basic-addon1" minlength="10" maxlength="10"
  225. pattern="[6-9]{1}[0-9]{9}">
  226. </div>
  227. </div>
  228. <div class="col-lg-6 col-md-12 mb-3">
  229. <label for="district">District</label>
  230. <input type="text" class="form-control" id="district" value="Chennai" disabled>
  231. </div>
  232. </div>
  233. <div class="form-row mb-4">
  234. <div class="col-lg-6 col-md-12 mb-3">
  235. <label for="address">Address<span class="req">*</span></label>
  236. <input type="text" class="form-control" id="address" placeholder="Enter Address...">
  237. <span class="text-danger" id="addressError"></span>
  238. </div>
  239. <div class="col-lg-6 col-md-12 mb-3">
  240. <label for="pincode">Pincode<span class="req">*</span></label>
  241. <input type="text" class="form-control" minlength="6" maxlength="6" pattern="[0-9]{6}"
  242. id="pincode" placeholder="Enter Pincode...">
  243. <span class="text-danger" id="pincodeError"></span>
  244. </div>
  245. </div>
  246. <h3>Education Qualification Details</h3>
  247. <div class="form-row mb-4">
  248. <div class="col-lg-6 col-md-12 mb-3">
  249. <label for="edu">Qualification<span class="req">*</span></label>
  250. <input type="text" class="form-control" id="edu"
  251. placeholder="Enter Highest Qualification Obtained">
  252. <span class="text-danger" id="eduError"></span>
  253. </div>
  254. <div class="col-lg-6 col-md-12 mb-3">
  255. <label for="college">College/Institution Name<span class="req">*</span></label>
  256. <input type="text" class="form-control" id="college" placeholder="Enter College Name ">
  257. <span class="text-danger" id="collegeError"></span>
  258. </div>
  259. </div>
  260. <div class="form-row mb-4">
  261. <div class="col-lg-6 col-md-12 mb-3">
  262. <label for="nss">NSS Cadet<span class="req">*</span></label>
  263. <div class="radio-group">
  264. <div class="radio-item">
  265. <input type="radio" id="nssY" name="nss" value="true" checked>
  266. <label for="nssY">Yes</label>
  267. </div>
  268. <div class="radio-item">
  269. <input type="radio" id="nssN" name="nss" value="false">
  270. <label for="nssN">No</label>
  271. </div>
  272. </div>
  273. <span class="text-danger" id="nssError"></span>
  274. </div>
  275. <div class="col-lg-6 col-md-12 mb-3">
  276. <label for="ncc">NCC Cadet<span class="req">*</span></label>
  277. <div class="radio-group">
  278. <div class="radio-item">
  279. <input type="radio" id="nccY" name="ncc" value="true" checked>
  280. <label for="male">Yes</label>
  281. </div>
  282. <div class="radio-item">
  283. <input type="radio" id="nccN" name="ncc" value="false">
  284. <label for="female">No</label>
  285. </div>
  286. </div>
  287. <span class="text-danger" id="nccError"></span>
  288. </div>
  289. </div>
  290. <h3>Employment Details</h3>
  291. <div class="form-row mb-4">
  292. <div class="col-lg-6 col-md-12 mb-3">
  293. <label for="occupation">Company/NGO Name (Enter NA if not working)</label>
  294. <input type="text" class="form-control" id="occupation"
  295. placeholder="Enter company/NGO...">
  296. </div>
  297. <div class="col-lg-6 col-md-12 mb-3" style="display:none;">
  298. <label for="designation">Designation</label>
  299. <input type="text" class="form-control" id="designation"
  300. placeholder="Enter Designation...">
  301. </div>
  302. </div>
  303. <h3>Other Information</h3>
  304. <div class="form-row mb-4">
  305. <div class="col-lg-6 col-md-12 mb-3">
  306. <label for="ngoAny">Company/NGO you are associated with,if any(NA otherwise)<span
  307. class="req">*</span></label>
  308. <input type="text" class="form-control" id="ngoAny" placeholder="">
  309. <span class="text-danger" id="ngoAnyError"></span>
  310. </div>
  311. <div class="col-lg-6 col-md-12 mb-3">
  312. <label for="prevol">Have you previously Volunteered In any Emergency Situation?<span
  313. class="req">*</span></label>
  314. <div class="radio-group">
  315. <div class="radio-item">
  316. <input type="radio" id="preVolY" name="preVol" value="true" checked>
  317. <label for="preVolY">Yes</label>
  318. </div>
  319. <div class="radio-item">
  320. <input type="radio" id="preVolN" name="preVol" value="false">
  321. <label for="preVolN">No</label>
  322. </div>
  323. </div>
  324. <span class="text-danger" id="prevolError"></span>
  325. </div>
  326. </div>
  327. </div>
  328. <!-- Individual Form -->
  329. <!-- Corporate Form -->
  330. <div class="corporate-form" id="corporate">
  331. <h3>Contact Details</h3>
  332. <div class="form-row mb-4">
  333. <div class="col-lg-6 col-md-12 mb-3">
  334. <label for="cmpName">Company Name<span class="req">*</span></label>
  335. <input type="text" class="form-control" id="cmpName" placeholder="Enter Company Name">
  336. <span class="text-danger" id="cmpNameError"></span>
  337. </div>
  338. <div class="col-lg-6 col-md-12 mb-3">
  339. <label for="cmpEmail">Company Email ID</label>
  340. <input type="text" class="form-control" id="cmpEmail"
  341. placeholder="Enter Company Email ID">
  342. </div>
  343. </div>
  344. <div class="form-row mb-4" style="display:none;">
  345. <div class="col-lg-6 col-md-12 mb-3">
  346. <label for="cmpLandline">Phone</label>
  347. <div class="input-group mb-3">
  348. <div class="input-group-prepend">
  349. <span class="input-group-text" id="basic-ad">044</span>
  350. </div>
  351. <input type="text" class="form-control" id="cmpLandline"
  352. placeholder="Enter LandLine Number" aria-label="Mobile"
  353. aria-describedby="basic-addon1">
  354. </div>
  355. </div>
  356. <div class="col-lg-6 col-md-12 mb-3">
  357. <label for="cmpMobile">Mobile</label>
  358. <div class="input-group mb-3">
  359. <div class="input-group-prepend">
  360. <span class="input-group-text" id="basic-on1">+91</span>
  361. </div>
  362. <input type="text" class="form-control" id="cmpMobile"
  363. placeholder="Enter Mobile Number" aria-label="Mobile"
  364. aria-describedby="basic-addon1" minlength="10" maxlength="10"
  365. pattern="[6-9]{1}[0-9]{9}">
  366. </div>
  367. </div>
  368. </div>
  369. <div class="form-row mb-4">
  370. <div class="col-lg-6 col-md-12 mb-3">
  371. <label for="cmpDistrict">District</label>
  372. <input type="text" class="form-control" id="cmpDistrict" value="Chennai" disabled>
  373. </div>
  374. </div>
  375. <div class="form-row mb-4">
  376. <div class="col-lg-6 col-md-12 mb-3">
  377. <label for="cmpAddress">Address<span class="req">*</span></label>
  378. <input type="text" class="form-control" id="cmpAddress" placeholder="Enter Address...">
  379. <span class="text-danger" id="cmpAddressError"></span>
  380. </div>
  381. <div class="col-lg-6 col-md-12 mb-3">
  382. <label for="cmpPincode">Pincode<span class="req">*</span></label>
  383. <input type="text" class="form-control" id="cmpPincode" minlength="6" maxlength="6"
  384. pattern="[0-9]{6}" placeholder="Enter Pincode...">
  385. <span class="text-danger" id="cmpPincodeError"></span>
  386. </div>
  387. </div>
  388. <h4 class="">No of volunteers from your Company<span class="req">*</span></h4>
  389. <div class="form-row mb-4">
  390. <div class="col-lg-6 col-md-12 mb-3">
  391. <input type="number" class="form-control" id="cmpNov">
  392. <span class="text-danger" id="cmpNovError"></span>
  393. </div>
  394. </div>
  395. <h4>Point of Contact</h4>
  396. <div class="form-row mb-4">
  397. <div class="col-lg-6 col-md-12 mb-3">
  398. <label for="cmpPoc">Name<span class="req">*</span></label>
  399. <input type="text" class="form-control" id="cmpPoc">
  400. <span class="text-danger" id="cmpPocError"></span>
  401. </div>
  402. <div class="col-lg-6 col-md-12 mb-3">
  403. <label for="cmdPod">Designation<span class="req">*</span></label>
  404. <input type="text" class="form-control" id="cmdPod" placeholder="Enter Designation...">
  405. <span class="text-danger" id="cmdPodError"></span>
  406. </div>
  407. </div>
  408. <div class="form-row mb-4">
  409. <div class="col-lg-6 col-md-12 mb-3">
  410. <label for="cmdPoE">Email ID<span class="req">*</span></label>
  411. <input type="text" class="form-control" id="cmdPoE" placeholder="Enter Email ID...">
  412. <span class="text-danger" id="cmdPoEError"></span>
  413. </div>
  414. <div class="col-lg-6 col-md-12 mb-3">
  415. <label for="cmdPom">Phone No<span class="req">*</span></label>
  416. <input type="number" class="form-control" id="cmdPom" placeholder="Enter Mobile No...">
  417. <span class="text-danger" id="cmdPomError"></span>
  418. </div>
  419. </div>
  420. <div class="form-row mb-4">
  421. <div class="col-lg-6 col-md-12 mb-3">
  422. <label for="comprevol">Has your Company previously Volunteered In any Emergency
  423. Situation?
  424. *</label>
  425. <div class="radio-group">
  426. <div class="radio-item">
  427. <input type="radio" id="cmpVolY" name="cmpPVol" value="true" checked>
  428. <label for="cmpVolY">Yes</label>
  429. </div>
  430. <div class="radio-item">
  431. <input type="radio" id="cmpVolN" name="cmpPVol" value="false">
  432. <label for="cmpVolN">No</label>
  433. </div>
  434. </div>
  435. <span class="text-danger" id="comprevolError"></span>
  436. </div>
  437. </div>
  438. </div>
  439. <!-- Corporate Form -->
  440. <!-- NGO Form -->
  441. <div class="ngo-form" id="ngo">
  442. <h3>Contact Details</h3>
  443. <div class="form-row mb-4">
  444. <div class="col-lg-6 col-md-12 col-sm-12 mb-3">
  445. <label for="ngoOrgName">Organization Name<span class="req">*</span></label>
  446. <input type="text" class="form-control" id="ngoOrgName" placeholder="Enter Name">
  447. <span class="text-danger" id="ngoOrgNameError"></span>
  448. </div>
  449. <div class="col-lg-6 col-md-12 mb-3">
  450. <label for="ngoOrgEmail">Company Email ID</label>
  451. <input type="text" class="form-control" id="ngoOrgEmail" placeholder="Enter Email ID">
  452. </div>
  453. </div>
  454. <div class="form-row mb-4" style="display:none;">
  455. <div class="col-lg-6 col-md-12 mb-3">
  456. <label for="oLandline">Phone</label>
  457. <div class="input-group mb-3">
  458. <div class="input-group-prepend">
  459. <span class="input-group-text" id="basic-aon1">044</span>
  460. </div>
  461. <input type="text" class="form-control" id="oLandline"
  462. placeholder="Enter Landline Number" aria-label="Mobile"
  463. aria-describedby="basic-addon1">
  464. </div>
  465. </div>
  466. <div class="col-lg-6 col-md-12 mb-3">
  467. <label for="oMobile">Mobile</label>
  468. <div class="input-group mb-3">
  469. <div class="input-group-prepend">
  470. <span class="input-group-text" id="basic-addon1">+91</span>
  471. </div>
  472. <input type="text" class="form-control" id="oMobile"
  473. placeholder="Enter Mobile Number" aria-label="Mobile"
  474. aria-describedby="basic-addon1">
  475. </div>
  476. </div>
  477. </div>
  478. <div class="form-row mb-4">
  479. <div class="col-lg-6 col-md-12 mb-3">
  480. <label for="oDistrict">District</label>
  481. <input type="text" class="form-control" id="oDistrict" value="Chennai" disabled>
  482. </div>
  483. </div>
  484. <div class="form-row mb-4">
  485. <div class="col-lg-6 col-md-12 mb-3">
  486. <label for="oAddress">Address<span class="req">*</span></label>
  487. <input type="text" class="form-control" id="oAddress" placeholder="Enter Address...">
  488. <span class="text-danger" id="oAddressError"></span>
  489. </div>
  490. <div class="col-lg-6 col-md-12 mb-3">
  491. <label for="oPincode">Pincode<span class="req">*</span></label>
  492. <input type="picode" class="form-control" id="oPincode" minlength="6" maxlength="6"
  493. pattern="[0-9]{6}" placeholder="Enter Pincode...">
  494. <span class="text-danger" id="oPincodeError"></span>
  495. </div>
  496. </div>
  497. <h4 class="volorg">No of volunteers from your Organization<span class="req">*</span></h4>
  498. <div class="form-row mb-4">
  499. <div class="col-lg-6 col-md-12 mb-3">
  500. <input type="number" class="form-control" id="oNvol">
  501. <span class="text-danger" id="oNvolError"></span>
  502. </div>
  503. </div>
  504. <h4>Point of Contact</h4>
  505. <div class="form-row mb-4">
  506. <div class="col-lg-6 col-md-12 mb-3">
  507. <label for="oPoc">Name<span class="req">*</span></label>
  508. <input type="text" class="form-control" id="oPoc" placeholder="Person Name">
  509. <span class="text-danger" id="oPocError"></span>
  510. </div>
  511. <div class="col-lg-6 col-md-12 mb-3">
  512. <label for="oPod">Designation<span class="req">*</span></label>
  513. <input type="text" class="form-control" id="oPod" placeholder="Enter Designation...">
  514. <span class="text-danger" id="oPodError"></span>
  515. </div>
  516. </div>
  517. <div class="form-row mb-4">
  518. <div class="col-lg-6 col-md-12 mb-3">
  519. <label for="oPoe">Email ID<span class="req">*</span></label>
  520. <input type="text" class="form-control" id="oPoE" placeholder="Enter Email ID...">
  521. <span class="text-danger" id="oPoeError"></span>
  522. </div>
  523. <div class="col-lg-6 col-md-12 mb-3">
  524. <label for="oPom">Phone No<span class="req">*</span></label>
  525. <input type="number" class="form-control" id="oPom" placeholder="Enter Phone No...">
  526. <span class="text-danger" id="oPomError"></span>
  527. </div>
  528. </div>
  529. <div class="form-row mb-4">
  530. <div class="col-lg-6 col-md-12 mb-3">
  531. <label for="oPvolY">Has your Organization previously Volunteered In any Emergency
  532. Situation?<span class="req">*</span></label>
  533. <div class="radio-group">
  534. <div class="radio-item">
  535. <input type="radio" id="oPvolY" name="oPvolY" value="true" checked>
  536. <label for="male">Yes</label>
  537. </div>
  538. <div class="radio-item">
  539. <input type="radio" id="oPvolN" name="oPvolY" value="false">
  540. <label for="female">No</label>
  541. </div>
  542. </div>
  543. <span class="text-danger" id="oPvolYError"></span>
  544. </div>
  545. </div>
  546. </div>
  547. <!-- NGO Form -->
  548. <!-- Preferred area of work checkboxes -->
  549. <h5>Preferred area of work<span class="req">*</span></h5>
  550. <div class="form-check mb-3">
  551. <input class="form-check-input zone-checkbox" type="checkbox" id="anyArea" name="anyArea"
  552. value="0-any" onclick="checkAnyArea()">
  553. <label class="form-check-label" for="anyArea">Any area in Chennai</label>
  554. <span class="text-danger" id="anyAreaError"></span>
  555. </div>
  556. <div class="container mt-5">
  557. <!-- First Row of Zones -->
  558. <div class="form-row">
  559. <div class="col-3">
  560. <div class="form-check">
  561. <input class="form-check-input zone-checkbox" type="checkbox" id="zone1"
  562. name="zone1" value="1-Thiruvottiyur" onclick="checkAnyArea()">
  563. <label class="zone-checkbox-label" for="zone1">Zone 1 (Thiruvottiyur)</label>
  564. </div>
  565. </div>
  566. <div class="col-3">
  567. <div class="form-check">
  568. <input class="form-check-input zone-checkbox" type="checkbox" id="zone2"
  569. name="zone2" value="2-Manali" onclick="checkAnyArea()">
  570. <label class="zone-checkbox-label" for="zone2">Zone 2 (Manali)</label>
  571. </div>
  572. </div>
  573. <div class="col-3">
  574. <div class="form-check">
  575. <input class="form-check-input zone-checkbox" type="checkbox" id="zone3"
  576. name="zone3" value="3-Madhavaram" onclick="checkAnyArea()">
  577. <label class="zone-checkbox-label" for="zone3">Zone 3 (Madhavaram)</label>
  578. </div>
  579. </div>
  580. <div class="col-3">
  581. <div class="form-check">
  582. <input class="form-check-input zone-checkbox" type="checkbox" id="zone4"
  583. name="zone4" value="4-Tondiarpet" onclick="checkAnyArea()">
  584. <label class="zone-checkbox-label" for="zone4">Zone 4 (Tondiarpet)</label>
  585. </div>
  586. </div>
  587. </div>
  588. <!-- Second Row of Zones -->
  589. <div class="form-row mt-2">
  590. <div class="col-3">
  591. <div class="form-check">
  592. <input class="form-check-input zone-checkbox" type="checkbox" id="zone5"
  593. name="zone5" value="5-Royapuram" onclick="checkAnyArea()">
  594. <label class="zone-checkbox-label" for="zone5">Zone 5 (Royapuram)</label>
  595. </div>
  596. </div>
  597. <div class="col-3">
  598. <div class="form-check">
  599. <input class="form-check-input zone-checkbox" type="checkbox" id="zone6"
  600. name="zone6" value="6-Thiru-Vi-Ka Nagar" onclick="checkAnyArea()">
  601. <label class="zone-checkbox-label" for="zone6">Zone 6 (Thiru-Vi-Ka Nagar)</label>
  602. </div>
  603. </div>
  604. <div class="col-3">
  605. <div class="form-check">
  606. <input class="form-check-input zone-checkbox" type="checkbox" id="zone7"
  607. name="zone7" value="7-Ambattur" onclick="checkAnyArea()">
  608. <label class="zone-checkbox-label" for="zone7">Zone 7 (Ambattur)</label>
  609. </div>
  610. </div>
  611. <div class="col-3">
  612. <div class="form-check">
  613. <input class="form-check-input zone-checkbox" type="checkbox" id="zone8"
  614. name="zone8" value="8-Anna Nagar" onclick="checkAnyArea()">
  615. <label class="zone-checkbox-label" for="zone8">Zone 8 (Anna Nagar)</label>
  616. </div>
  617. </div>
  618. </div>
  619. <!-- Third Row of Zones -->
  620. <div class="form-row mt-2">
  621. <div class="col-3">
  622. <div class="form-check">
  623. <input class="form-check-input zone-checkbox" type="checkbox" id="zone9"
  624. name="zone9" value="9-Teynampet" onclick="checkAnyArea()">
  625. <label class="zone-checkbox-label" for="zone9">Zone 9 (Teynampet)</label>
  626. </div>
  627. </div>
  628. <div class="col-3">
  629. <div class="form-check">
  630. <input class="form-check-input zone-checkbox" type="checkbox" id="zone10"
  631. name="zone10" value="10-Kodambakkam" onclick="checkAnyArea()">
  632. <label class="zone-checkbox-label" for="zone10">Zone 10 (Kodambakkam)</label>
  633. </div>
  634. </div>
  635. <div class="col-3">
  636. <div class="form-check">
  637. <input class="form-check-input zone-checkbox" type="checkbox" id="zone11"
  638. name="zone11" value="11-Valasarvakkam" onclick="checkAnyArea()">
  639. <label class="zone-checkbox-label" for="zone11">Zone 11 (Valasarvakkam)</label>
  640. </div>
  641. </div>
  642. <div class="col-3">
  643. <div class="form-check">
  644. <input class="form-check-input zone-checkbox" type="checkbox" id="zone12"
  645. name="zone12" value="12-Alandur" onclick="checkAnyArea()">
  646. <label class="zone-checkbox-label" for="zone12">Zone 12 (Alandur)</label>
  647. </div>
  648. </div>
  649. </div>
  650. <!-- Fourth Row of Zones -->
  651. <div class="form-row mt-2">
  652. <div class="col-3">
  653. <div class="form-check">
  654. <input class="form-check-input zone-checkbox" type="checkbox" id="zone13"
  655. name="zone13" value="13-Adyar" onclick="checkAnyArea()">
  656. <label class="zone-checkbox-label" for="zone13">Zone 13 (Adyar)</label>
  657. </div>
  658. </div>
  659. <div class="col-3">
  660. <div class="form-check">
  661. <input class="form-check-input zone-checkbox" type="checkbox" id="zone14"
  662. name="zone14" value="14-Perungudi" onclick="checkAnyArea()">
  663. <label class="zone-checkbox-label" for="zone14">Zone 14 (Perungudi)</label>
  664. </div>
  665. </div>
  666. <div class="col-3">
  667. <div class="form-check">
  668. <input class="form-check-input zone-checkbox" type="checkbox" id="zone15"
  669. name="zone15" value="15-Sholinganallur" onclick="checkAnyArea()">
  670. <label class="zone-checkbox-label" for="zone15">Zone 15 (Sholinganallur)</label>
  671. </div>
  672. </div>
  673. </div>
  674. </div>
  675. <center>
  676. <button type="submit" class="btn btn-primary">Submit</button>
  677. </center>
  678. </div>
  679. </div>
  680. </form>
  681. </div>
  682. <script>
  683. document.querySelector('.individual-form').style.display = 'none';
  684. document.querySelector('.corporate-form').style.display = 'none';
  685. document.querySelector('.ngo-form').style.display = 'none';
  686. function handleCategoryChange() {
  687. // Get selected category
  688. var category = document.getElementById("category").value;
  689. // Hide all forms
  690. document.querySelector('.individual-form').style.display = 'none';
  691. document.querySelector('.corporate-form').style.display = 'none';
  692. document.querySelector('.ngo-form').style.display = 'none';
  693. // Clear subcategory options
  694. var subcategory = document.getElementById("subcategory");
  695. subcategory.innerHTML = '<option value="-1">Select</option>';
  696. // Show the corresponding form and set subcategory options
  697. if (category === "Individual") {
  698. document.querySelector('.individual-form').style.display = 'block';
  699. subcategory.innerHTML += `
  700. <option value="Medical Assistance/Counselling Service">Medical Assistance/Counselling Service</option>
  701. <option value="Cooks & Assistance">Cooks & Assistance</option>
  702. <option value="General Assistance">General Assistance</option>
  703. <option value="Distribution/Delivery Support">Distribution/Delivery Support</option>
  704. <option value="Centre Admin Support">Centre Admin Support</option>
  705. <option value="Graphic Designers">Graphic Designers</option>
  706. <option value="Call Centre Support">Call Centre Support</option>
  707. <option value="Survey">Survey</option>
  708. `;
  709. } else if (category === "Corporate") {
  710. document.querySelector('.corporate-form').style.display = 'block';
  711. subcategory.innerHTML += `<option value="N/A">N/A</option>`;
  712. } else if (category === "NGO") {
  713. document.querySelector('.ngo-form').style.display = 'block';
  714. subcategory.innerHTML += `<option value="N/A">N/A</option>`;
  715. }
  716. }
  717. function uncheckAnyArea() {
  718. }
  719. function checkAnyArea() {
  720. var anyArea = document.getElementById("anyArea").checked;
  721. if (anyArea) {
  722. for (var i = 1; i <= 15; i++) {
  723. document.getElementById("zone" + i).checked = false;
  724. }
  725. }
  726. }
  727. let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  728. let mobilePattern = /^[0-9]{10}$/;
  729. let pincodePattern = /^[0-9]{6}$/;
  730. function validateForm() {
  731. var isValid = true;
  732. $('.text-danger').text('');
  733. var i = 0;
  734. $(".zone-checkbox:checked").each(function () {
  735. if ($(this).val()) {
  736. i++;
  737. };
  738. });
  739. var category = document.getElementById("category").value;
  740. if (category == undefined || category === "-1") {
  741. $("#categoryError").text("Please Select Category");
  742. isValid = false;
  743. }
  744. if (category === "Individual") {
  745. var subcategory = document.getElementById("subcategory").value;
  746. var name = document.getElementById("name").value = document.getElementById("name").value.trim();
  747. var email = document.getElementById("email").value = document.getElementById("email").value.trim();
  748. let genderSelected = document.querySelector('input[name="gender"]:checked');
  749. var mobile = document.getElementById("mobile").value = document.getElementById("mobile").value.trim();
  750. var address = document.getElementById("address").value = document.getElementById("address").value.trim();
  751. var pincode = document.getElementById("pincode").value = document.getElementById("pincode").value.trim();
  752. var edu = document.getElementById("edu").value = document.getElementById("edu").value.trim();
  753. var college = document.getElementById("college").value = document.getElementById("college").value.trim();
  754. let nssSelected = document.querySelector('input[name="nss"]:checked');
  755. let nccSelected = document.querySelector('input[name="ncc"]:checked');
  756. // var occupation = document.getElementById("occupation").value= document.getElementById("occupation").value.trim();
  757. // var designation = document.getElementById("designation").value= document.getElementById("designation").value.trim();
  758. let preVolSelected = document.querySelector('input[name="preVol"]:checked');
  759. var ngoAny = document.getElementById("ngoAny").value = document.getElementById("ngoAny").value.trim();
  760. var dob = document.getElementById("dob").value = document.getElementById("dob").value.trim();
  761. if (subcategory == -1) {
  762. $("#subcategoryError").text("Please Select SubCategory !");
  763. isValid = false;
  764. }
  765. if (name == undefined || name == "") {
  766. $("#nameError").text("Please Enter Name !");
  767. isValid = false;
  768. }
  769. if (dob == undefined || dob == "") {
  770. $("#dobError").text("Please enter a Date of birth");
  771. isValid = false;
  772. }
  773. if (!genderSelected) {
  774. $("#genderError").text("Please Select Gender !");
  775. isValid = false;
  776. }
  777. if (mobile === "" || !mobilePattern.test(mobile)) {
  778. $("#mobileError").text("Please enter a valid 10-digit mobile number");
  779. isValid = false;
  780. }
  781. if (address == undefined || address == "") {
  782. $("#addressError").text("Please Enter address !");
  783. isValid = false;
  784. }
  785. // Pincode validation
  786. if (pincode === "" || !pincodePattern.test(pincode)) {
  787. $("#pincodeError").text("Please enter a valid 6-digit pincode");
  788. isValid = false;
  789. }
  790. if (edu == undefined || edu == "") {
  791. $("#eduError").text("Please Enter Education details !");
  792. isValid = false;
  793. }
  794. if (college == undefined || college == "") {
  795. $("#collegeError").text("Please Enter college details !");
  796. isValid = false;
  797. }
  798. if (!nssSelected) {
  799. $("#nssError").text("Please Select NSS details !");
  800. isValid = false;
  801. }
  802. if (!nccSelected) {
  803. $("#nccError").text("Please Select NCC details !");
  804. isValid = false;
  805. }
  806. /* if( occupation == undefined ||occupation == ""){
  807. alert("Please Enter Occupation details !");
  808. return false;
  809. }
  810. if(designation == undefined || designation == ""){
  811. alert("Please Enter Designation details !");
  812. return false;
  813. } */
  814. if (!preVolSelected) {
  815. $("#prevolError").text("Please Select Previous Volunteer details !");
  816. isValid = false;
  817. }
  818. if (ngoAny == undefined || ngoAny == "") {
  819. $("#ngoAnyError").text("Please Enter Company/NGO details !");
  820. isValid = false;
  821. }
  822. if (i == 0) {
  823. $("#anyAreaError").text("Please select Preferred Area details !");
  824. isValid = false;
  825. }
  826. if (isValid) {
  827. saveTheIndividualForm();
  828. }
  829. return false;
  830. }
  831. else if (category === "Corporate") {
  832. var cmpName = document.getElementById("cmpName").value = document.getElementById("cmpName").value.trim();
  833. var cmpEmail = document.getElementById("cmpEmail").value = document.getElementById("cmpEmail").value.trim();
  834. var cmpLandline = document.getElementById("cmpLandline").value = document.getElementById("cmpLandline").value.trim();
  835. var cmpMobile = document.getElementById("cmpMobile").value = document.getElementById("cmpMobile").value.trim();
  836. var cmpAddress = document.getElementById("cmpAddress").value = document.getElementById("cmpAddress").value.trim();
  837. var cmpPincode = document.getElementById("cmpPincode").value = document.getElementById("cmpPincode").value.trim();
  838. var cmpNov = document.getElementById("cmpNov").value = document.getElementById("cmpNov").value.trim();
  839. var cmpPoc = document.getElementById("cmpPoc").value = document.getElementById("cmpPoc").value.trim();
  840. var cmdPom = document.getElementById("cmdPom").value = document.getElementById("cmdPom").value.trim();
  841. var cmpPVolSelect = document.querySelector('input[name="cmpPVol"]:checked');
  842. var cmdPoE = document.getElementById("cmdPoE").value = document.getElementById("cmdPoE").value.trim();
  843. if (cmpName == undefined || cmpName == "") {
  844. $("#cmpNameError").text("Please Enter Company Name");
  845. isValid = false;
  846. }
  847. if (cmpAddress == undefined || cmpAddress == "") {
  848. $("#cmpAddressError").text("Please Enter Company Address");
  849. isValid = false;
  850. }
  851. if (cmpPincode == undefined || cmpPincode == "") {
  852. $("#cmpPincodeError").text("Please Enter Pincode ");
  853. isValid = false;
  854. }
  855. if (cmpNov == undefined || cmpNov == "") {
  856. $("#cmpNovError").text("Please Enter No of Volunteer");
  857. isValid = false;
  858. }
  859. if (cmpPoc == undefined || cmpPoc == "") {
  860. $("#cmpPocError").text("Please Enter Point of Conduct Name");
  861. isValid = false;
  862. }
  863. if (cmdPoE === "" || !emailPattern.test(cmdPoE)) {
  864. $("#cmdPoEError").text("Please enter Point of Conduct a valid Email ID");
  865. isValid = false;
  866. }
  867. if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
  868. $("#cmdPomError").text("Please enter Point of Conduct Valid Mobile No");
  869. isValid = false;
  870. }
  871. if (!cmpPVolSelect) {
  872. $("#anyAreaError").text("Please Select previous volunteers details");
  873. isValid = false;
  874. }
  875. if (i == 0) {
  876. alert("Please select Preferred Area details !");
  877. isValid = false;
  878. }
  879. if (isValid) {
  880. saveCorporateDetails();
  881. }
  882. return false;
  883. }
  884. else if (category === "NGO") {
  885. var cmpName = document.getElementById("ngoOrgName").value = document.getElementById("ngoOrgName").value.trim();
  886. var ngoOrgEmail = document.getElementById("ngoOrgEmail").value = document.getElementById("ngoOrgEmail").value.trim();
  887. var cmpLandline = document.getElementById("oLandline").value = document.getElementById("oLandline").value.trim();
  888. var cmpMobile = document.getElementById("oMobile").value = document.getElementById("oMobile").value.trim();
  889. var cmpAddress = document.getElementById("oAddress").value = document.getElementById("oAddress").value.trim();
  890. var cmpPincode = document.getElementById("oPincode").value = document.getElementById("oPincode").value.trim();
  891. var cmpNov = document.getElementById("oNvol").value = document.getElementById("oNvol").value.trim();
  892. var cmpPoc = document.getElementById("oPoc").value = document.getElementById("oPoc").value.trim();
  893. var cmdPom = document.getElementById("oPom").value = document.getElementById("oPom").value.trim();
  894. var cmpPVolSelect = document.querySelector('input[name="oPvolY"]:checked');
  895. var oPoE = document.getElementById("oPoE").value = document.getElementById("oPoE").value.trim();
  896. if (cmpName == undefined || cmpName == "") {
  897. $("#ngoOrgNameError").text("Please Enter Organisation Name");
  898. isValid = false;
  899. }
  900. if (cmpAddress == undefined || cmpAddress == "") {
  901. $("#oAddressError").text("Please Enter Organisation Address");
  902. isValid = false;
  903. }
  904. if (cmpPincode == undefined || cmpPincode == "") {
  905. $("#oPincodeError").text("Please Enter Pincode ");
  906. isValid = false;
  907. }
  908. if (cmpNov == undefined || cmpNov == "") {
  909. $("#oNvolError").text("Please Enter No of Volunteer");
  910. isValid = false;
  911. }
  912. if (cmpPoc == undefined || cmpPoc == "") {
  913. $("#oPocError").text("Please Enter Point of Conduct Name");
  914. isValid = false;
  915. }
  916. if (oPoE === "" || !emailPattern.test(oPoE)) {
  917. $("#oPoeError").text("Please enter Point of Conduct valid Email ID");
  918. isValid = false;
  919. }
  920. if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
  921. $("#oPomError").text("Please Enter Point of Conduct Mobile No");
  922. isValid = false;
  923. }
  924. if (!cmpPVolSelect) {
  925. $("#oPvolYError").text("Please Select previous volunteers details");
  926. isValid = false;
  927. }
  928. if (i == 0) {
  929. alert("Please select Preferred Area details !");
  930. isValid = false;
  931. }
  932. if (isValid) {
  933. saveNGODetails();
  934. }
  935. return false;
  936. }
  937. return false;
  938. }
  939. function saveTheIndividualForm() {
  940. var preferredAreas = [];
  941. $(".zone-checkbox:checked").each(function () {
  942. preferredAreas.push($(this).val());
  943. });
  944. // Create JSON object with form data
  945. var volunteerData = {
  946. category: $("#category").val(),
  947. subCategory: $("#subcategory").val(),
  948. name: $("#name").val(),
  949. email: $("#email").val(),
  950. dob: $("#dob").val(),
  951. gender: $("input[name='gender']:checked").val(),
  952. mobile_no: $("#mobile").val(),
  953. landline_no: $("#landline").val(),
  954. district: $("#district").val(),
  955. address: $("#address").val(),
  956. pin_code: $("#pincode").val(),
  957. degree: $("#edu").val(),
  958. college_name: $("#college").val(),
  959. vol_nss: $("input[name='nss']:checked").val(),
  960. vol_ncc: $("input[name='ncc']:checked").val(),
  961. occupation: $("#occupation").val(),
  962. designation: $("#designation").val(),
  963. ngo_associated: $("#ngoAny").val(),
  964. previous_volunteered: $("input[name='preVol']:checked").val(),
  965. // Add more fields if needed
  966. referBy: $("#ref").val(),
  967. preferredAreas: preferredAreas
  968. };
  969. // Send AJAX POST request
  970. $.ajax({
  971. type: "POST",
  972. url: "/volunteer/api/register",
  973. contentType: "application/json",
  974. data: JSON.stringify(volunteerData),
  975. success: function (response) {
  976. successPopup(response);
  977. },
  978. error: function (error) {
  979. alert("Error saving data!");
  980. console.log(error);
  981. }
  982. });
  983. return false;
  984. }
  985. function saveCorporateDetails() {
  986. var preferredAreas = [];
  987. $(".zone-checkbox:checked").each(function () {
  988. preferredAreas.push($(this).val());
  989. });
  990. var copInfo = {
  991. category: $("#category").val(),
  992. subCategory: $("#subcategory").val(),
  993. compName: $("#cmpName").val(),
  994. compEmail: $("#cmpEmail").val(),
  995. landline: $("#cmpLandline").val(),
  996. mobileNo: $("#cmpMobile").val(),
  997. district: $("#cmpDistrict").val(),
  998. address: $("#cmpAddress").val(),
  999. pinCode: $("#cmpPincode").val(),
  1000. no_of_vol: $("#cmpNov").val(),
  1001. contactPerson: $("#cmpPoc").val(),
  1002. contactPerMobile: $("#cmdPom").val(),
  1003. cntPerEmail: $("#cmdPoE").val(),
  1004. cntPerDesign: $("#cmdPod").val(),
  1005. previous_volunteered: $("input[name='cmpPVol']:checked").val(),
  1006. referBy: $("#ref").val(),
  1007. preferredAreas: preferredAreas
  1008. }
  1009. $.ajax({
  1010. type: "POST",
  1011. url: "/volunteer/api/registerAsCorporate",
  1012. contentType: "application/json",
  1013. data: JSON.stringify(copInfo),
  1014. success: function (response) {
  1015. successPopup(response);
  1016. },
  1017. error: function (error) {
  1018. alert("Error saving data!");
  1019. console.log(error);
  1020. }
  1021. });
  1022. return false;
  1023. }
  1024. function saveNGODetails() {
  1025. var preferredAreas = [];
  1026. $(".zone-checkbox:checked").each(function () {
  1027. preferredAreas.push($(this).val());
  1028. });
  1029. var ngoInfo = {
  1030. category: $("#category").val(),
  1031. subCategory: $("#subcategory").val(),
  1032. orgName: $("#ngoOrgName").val(),
  1033. orgEmail: $("#ngoOrgEmail").val(),
  1034. landline: $("#oLandline").val(),
  1035. mobileNo: $("#oMobile").val(),
  1036. district: $("#oDistrict").val(),
  1037. address: $("#oAddress").val(),
  1038. pinCode: $("#oPincode").val(),
  1039. no_of_vol: $("#oNvol").val(),
  1040. contactPerson: $("#oPoc").val(),
  1041. contactPerMobile: $("#oPom").val(),
  1042. cntPerEmail: $("#oPoE").val(),
  1043. cntPerDesign: $("#oPod").val(),
  1044. previous_volunteered: $("input[name='oPvolY']:checked").val(),
  1045. referBy: $("#ref").val(),
  1046. preferredAreas: preferredAreas
  1047. }
  1048. $.ajax({
  1049. type: "POST",
  1050. url: "/volunteer/api/registerAsNgo",
  1051. contentType: "application/json",
  1052. data: JSON.stringify(ngoInfo),
  1053. success: function (response) {
  1054. successPopup(response);
  1055. },
  1056. error: function (error) {
  1057. alert("Error saving data!");
  1058. console.log(error);
  1059. }
  1060. });
  1061. return false;
  1062. }
  1063. function successPopup(id) {
  1064. Swal.fire({
  1065. title: "Good job!",
  1066. 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",
  1067. icon: "success"
  1068. }).then((result) => {
  1069. if (result.isConfirmed) {
  1070. window.location.href = "https://chennaicorporation.gov.in/gcc/"; // Redirect to the desired URL
  1071. }
  1072. });
  1073. }
  1074. </script>
  1075. </body>
  1076. </html>