hariprasaths
/
Volunteers_and_Cdwaste
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
11 Commits
1 Branch
0 Tags
88 MiB
Tree: 74308fc302
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '74308fc302'
${ noResults }
Volunteers_and_Cdwaste/src/main/resources/templates/index_tamil.html

2508 lines
89 KiB
Raw Normal View History

Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
Changes in registration form
1 month ago
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
Changes in registration form
1 month ago
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
​
​
​
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Changes in registration form
1 month ago
Integrated Whatsapp message for volunteer registration
2 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>GCC - Volunteers</title>
  7. <!-- Links to Bootstrap CSS and JS, jQuery, and SweetAlert -->
  8. <!-- Bootstrap CSS -->
  9. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  11. <!-- jQuery (Only load it once) -->
  12. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  14. <!-- Popper.js (Required for Bootstrap 4) -->
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  17. <!-- Bootstrap JS -->
  18. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  20. <!-- SweetAlert JS (optional if you plan to use it) -->
  21. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  24. <style>
  25. /*for radio button style*/
  26. .radio-group {
  27. display: flex;
  28. align-items: center;
  29. /* Ensures all items are aligned to the center */
  30. }
  32. .radio-item {
  33. display: flex;
  34. align-items: center;
  35. margin-right: 20px;
  36. /* Adds space between each radio item */
  37. }
  39. .radio-item input[type="radio"] {
  40. margin-right: 10px;
  41. /* Adds space between the radio button and its label */
  42. vertical-align: middle;
  43. /* Ensures vertical alignment */
  44. }
  46. .radio-item label {
  47. margin: 0;
  48. /* Removes any default margins that might affect alignment */
  49. }
  52. /*for radio button style*/
  53. /*checkbox style*/
  54. .zone-checkbox-label {
  55. display: inline-block;
  56. padding: 10px 15px;
  57. border: 1px solid #ccc;
  58. border-radius: 8px;
  59. background-color: #f8f9fa;
  60. font-size: 16px;
  61. cursor: pointer;
  62. text-align: center;
  63. width: 100%;
  64. height:80px;
  65. }
  69. .zone-checkbox {
  70. margin-right: 10px;
  71. }
  73. .form-check {
  74. display: flex;
  75. align-items: center;
  76. margin-bottom: 10px;
  77. }
  79. .form-check-input {
  80. transform: scale(1.5);
  81. }
  83. /*checkbox style*/
  84. label {
  85. color: #858585;
  86. }
  88. /* Header Styling */
  89. /* .header {
  90. background-color: #1d495a;
  91. padding: 10px 20px;
  92. display: flex;
  93. align-items: center;
  94. justify-content: space-between;
  95. color: white;
  96. font-family: Arial, sans-serif;
  97. }
  99. .header .logo {
  100. display: flex;
  101. align-items: center;
  102. }
  104. .header .logo img {
  105. height: 60px;
  106. }
  108. .header .menu {
  109. display: flex;
  110. justify-content: center;
  111. align-items: center;
  112. flex-grow: 1;
  113. margin-left: 20px;
  114. }
  116. .header .menu a {
  117. color: white;
  118. margin: 0 15px;
  119. text-decoration: none;
  121. }
  123. .header .menu a:hover {
  124. text-decoration: underline;
  125. } */
  127. .req {
  128. color: red;
  130. }
  132. /* otp*/
  134. .otp-input-box {
  135. display: flex;
  136. justify-content: center;
  137. gap: 10px;
  138. /* Adjust spacing between the inputs */
  139. }
  141. .otp-input {
  142. width: 50px;
  143. /* Width for a square input */
  144. height: 50px;
  145. /* Height for a square input */
  146. font-size: 24px;
  147. /* Make the digits larger */
  148. text-align: center;
  149. /* Center the digit inside the box */
  150. border: 1px solid #ccc;
  151. /* Optional: add a border */
  152. border-radius: 5px;
  153. /* Optional: rounded corners */
  154. outline: none;
  155. /* Remove default focus outline */
  156. transition: border-color 0.3s ease;
  157. }
  159. .otp-input:focus {
  160. border-color: #007bff;
  161. /* Change border color on focus */
  162. }
  164. /* otp*/
  167. /*send otp styles*/
  168. .input-group .form-control {
  169. border-right: 0;
  170. /* Remove right border of the input to blend with the button */
  171. }
  173. .input-group-append .btn {
  174. border-left: 0;
  175. /* Remove left border of the button */
  176. }
  178. @media (max-width: 768px) {
  179. .zone-checkbox-label {
  180. font-size: 14px;
  181. }
  182. }
  184. .volunteer-header {
  185. position: relative;
  186. color: #1d4859;
  187. min-height: 58px;
  189. display: flex;
  190. align-items: center;
  191. justify-content: center;
  192. }
  194. .volunteer-title {
  195. margin: 0;
  196. text-align: center;
  197. }
  199. .language-buttons {
  200. position: absolute;
  201. right: 15px;
  202. top: 50%;
  203. transform: translateY(-50%);
  205. display: flex;
  206. gap: 5px;
  207. }
  208. .language-buttons .btn {
  209. border-color: #1d4859;
  210. color: #1d4859;
  211. }
  213. .language-buttons .btn:hover {
  214. background-color: #1d4859;
  215. color: white;
  216. }
  218. .language-buttons .btn.active,
  219. .language-buttons .btn-primary {
  220. background-color: #1d4859;
  221. border-color: #1d4859;
  222. color: white;
  223. }
  225. </style>
  226. </head>
  228. <body style="background-color: #ebf1fa;">
  229. <h1 style="display: none;">GCC Volunteers</h1>
  230. <h1 style="display: none;">GCC Volunteers Registration</h1>
  231. <h1 style="display: none;">Chennai Volunteers </h1>
  232. <h1 style="display: none;">Volunteers </h1>
  235. <!--
  236. <div class="header">
  238. <div class="logo">
  239. <img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Greater Chennai Corporation Logo">
  240. <span class="ml-2">GREATER CHENNAI CORPORATION</span>
  241. </div>
  244. <div class="menu">
  245. <a href="https://chennaicorporation.gov.in/gcc/">Home</a>
  246. <a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a>
  247. <a href="https://chennaicorporation.gov.in/gcc/who-is-who/index_data.jsp">Who'sWho</a>
  248. <a href="https://chennaicorporation.gov.in/gcc/council/about-council/">Council</a>
  249. <a href="https://chennaicorporation.gov.in/gcc/tender/">Tender</a>
  250. <a href="https://chennaicorporation.gov.in/gcc/department/">Departments</a>
  251. <a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a>
  252. </div>
  253. </div>
  254. -->
  256. <!-- Header Start-->
  261. <div class="container-fluid mt-5">
  262. <div id="loader" style="display: none; text-align: center;">
  263. <img src="/images/Thin broken ring.gif" alt="Loading..." />
  264. </div>
  266. <!-- <form onsubmit="return validateForm();" id="myForm"> -->
  267. <form id="myForm">
  269. <!-- Dropdowns for selecting category and subcategory -->
  272. <!-- Bootstrap Card for displaying uploaded details -->
  273. <div class="card" style="background-color: white;">
  275. <div class="card-header volunteer-header">
  277. <!-- <h3 class="volunteer-title">
  278. ஜிசிசி தன்னார்வலர்கள்
  279. </h3> -->
  281. <div class="language-buttons">
  283. <a href="/volunteer"
  284. class="btn btn-sm btn-outline-primary">
  285. English
  286. </a>
  288. <a href="/volunteer/index_tamil"
  289. class="btn btn-sm btn-primary">
  290. தமிழ்
  291. </a>
  294. </div>
  296. </div>
  300. <div class="card-body">
  302. <div class="form-row mb-4">
  303. <div class="col-lg-12 col-md-12 mb-3">
  304. <label for="category">வகையைத் தேர்ந்தெடுக்கவும் <span class="req">*</span></label>
  305. <select class="form-control" id="category" onchange="handleCategoryChange()">
  306. <!-- <option value="-1">Select</option>
  307. <option value="Individual">Individual</option>
  308. <option value="Corporate">Corporate</option>
  309. <option value="NGO">NGO/Other Associations</option> -->
  310. </select>
  311. <span class="text-danger" id="categoryError"></span>
  312. </div>
  313. <div class="col-lg-12 col-md-12 mb-3">
  314. <label for="subcategory">துணைப் பிரிவைத் தேர்ந்தெடுக்கவும் <span class="req">*</span></label>
  315. <select class="form-control" id="subcategory">
  316. <!-- <option value="-1">Select</option> -->
  317. </select>
  318. <span class="text-danger" id="subcategoryError"></span>
  319. </div>
  320. </div>
  321. <input type="hidden" class="form-control" id="ref" th:value="${ref}">
  323. <!-- Individual Form -->
  324. <div class="individual-form" id="individual">
  327. <h3>தொடர்பு விவரங்கள்</h3>
  328. <div class="form-row mb-4">
  329. <div class="col-lg-12 col-md-12 mb-3">
  330. <label for="name">பெயர்<span class="req">*</span></label>
  331. <input type="text" class="form-control" id="name" placeholder="பெயரை உள்ளிடவும்">
  332. <span class="text-danger" id="nameError"></span>
  333. </div>
  334. <!-- <div class="col-lg-12 col-md-12 mb-3">
  335. <label for="aadhar">Aadhar Number<span class="req">*</span></label>
  336. <input type="text" class="form-control" id="aadhar" maxlength="12"
  337. placeholder="Enter Aadhar No... " oninput="validateAadhar()">
  338. <span class="text-danger" id="aadharError"></span>
  339. </div> -->
  341. </div>
  342. <div class="form-row mb-4">
  343. <div class="col-lg-12 col-md-12 mb-3">
  344. <label for="email">மின்னஞ்சல் </label>
  345. <input type="text" class="form-control" id="email" placeholder="மின்னஞ்சலை உள்ளிடவும்">
  346. </div>
  349. <div class="col-lg-12 col-md-12 mb-3">
  350. <label for="dob">பிறந்த தேதி <span class="req">*</span></label>
  351. <input type="date" class="form-control" id="dob" onchange="validateAge()">
  352. <span class="text-danger" id="dobError"></span>
  354. </div>
  355. </div>
  356. <div class="form-row mb-4">
  357. <div class="col-lg-12 col-md-12 mb-3">
  358. <label for="gender">பாலினம்<span class="req">*</span></label>
  359. <div class="radio-group">
  360. <div class="radio-item">
  361. <input type="radio" id="male" name="gender" value="male" checked>
  362. <label for="male">ஆண்</label>
  363. </div>
  364. <div class="radio-item">
  365. <input type="radio" id="female" name="gender" value="female">
  366. <label for="female">பெண்</label>
  367. </div>
  368. <div class="radio-item">
  369. <input type="radio" id="others" name="gender" value="others">
  370. <label for="others">மற்றவர்கள்</label>
  371. </div>
  372. </div>
  373. <span class="text-danger" id="genderError"></span>
  374. </div>
  377. <div class="col-lg-12 col-md-12 mb-3">
  378. <label for="mobile">மொபைல்<span class="req">*</span></label>
  379. <div class="input-group mb-3">
  380. <div class="input-group-prepend">
  381. <span class="input-group-text" id="basic">+91</span>
  382. </div>
  383. <input type="text" class="form-control" id="mobile"
  384. placeholder="வாட்ஸ்அப் மொபைல் எண்ணை உள்ளிடவும்" aria-label="Mobile"
  385. aria-describedby="basic-addon1">
  386. <button class="btn btn-primary" id="sendOtpButton">
  387. <i class="fa fa-mobile-phone"></i> OTP அனுப்பு
  388. </button>
  389. <button class="btn btn-success" id="verifiedOTP" style="display:none" disabled>
  390. <i class="fa fa-mobile-phone"></i> OTP சரிபார்க்கப்பட்டது
  391. </button>
  392. </div>
  393. <span class="text-danger" id="mobileError"></span>
  394. </div>
  396. </div>
  397. <div class="form-row mb-4">
  398. <!-- <div class="col-lg-12 col-md-12 mb-3">
  399. <label for="phone">Phone</label>
  400. <div class="input-group mb-3">
  401. <div class="input-group-prepend">
  402. <span class="input-group-text" id="basic2">044</span>
  403. </div>
  404. <input type="text" class="form-control" id="landline"
  405. placeholder="Enter Landline Number" aria-label="Mobile"
  406. aria-describedby="basic-addon1" minlength="10" maxlength="10"
  407. pattern="[6-9]{1}[0-9]{9}">
  408. </div>
  410. </div> -->
  411. <div class="col-lg-12 col-md-12 mb-3">
  412. <label for="district">மாவட்டம் </label>
  413. <input type="text" class="form-control" id="district" value="Chennai" disabled>
  414. </div>
  416. </div>
  417. <div class="form-row mb-4">
  418. <div class="col-lg-12 col-md-12 mb-3">
  419. <label for="address">முகவரி <span class="req">*</span></label>
  420. <input type="text" class="form-control" id="address" placeholder="முகவரியை உள்ளிடவும்...">
  421. <span class="text-danger" id="addressError"></span>
  422. </div>
  425. <div class="col-lg-12 col-md-12 mb-3">
  426. <label for="pincode">அஞ்சல் குறியீடு<span class="req">*</span></label>
  427. <input type="text" class="form-control" minlength="6" maxlength="6" pattern="[0-9]{6}"
  428. id="pincode" placeholder="அஞ்சல் குறியீட்டை உள்ளிடவும்...">
  429. <span class="text-danger" id="pincodeError"></span>
  431. </div>
  432. </div>
  434. <!-- <div class="form-row mb-4">
  435. <div class="col-lg-12 col-md-12 mb-3">
  436. <label for="bloodgroup">Blood Group<span class="req">*</span></label>
  437. <select class="form-control" id="bloodgroup" name="bloodgroup">
  438. <option value="-1">Select Blood Group</option>
  439. <option value="A+">A+</option>
  440. <option value="A-">A-</option>
  441. <option value="B+">B+</option>
  442. <option value="B-">B-</option>
  443. <option value="O+">O+</option>
  444. <option value="O-">O-</option>
  445. <option value="AB+">AB+</option>
  446. <option value="AB-">AB-</option>
  447. </select>
  448. <span class="text-danger" id="addressError"></span>
  449. </div>
  453. </div> -->
  456. <!-- <h3>Education Qualification Details</h3>
  457. <div class="form-row mb-4">
  458. <div class="col-lg-12 col-md-12 mb-3">
  459. <label for="edu">Qualification<span class="req">*</span></label>
  460. <input type="text" class="form-control" id="edu"
  461. placeholder="Enter Highest Qualification Obtained">
  462. <span class="text-danger" id="eduError"></span>
  463. </div>
  466. <div class="col-lg-12 col-md-12 mb-3">
  467. <label for="college">College/Institution Name<span class="req">*</span></label>
  468. <input type="text" class="form-control" id="college" placeholder="Enter College Name ">
  469. <span class="text-danger" id="collegeError"></span>
  471. </div>
  472. </div>
  475. <div class="form-row mb-4">
  476. <div class="col-lg-12 col-md-12 mb-3">
  477. <label for="nss">NSS Cadet<span class="req">*</span></label>
  478. <div class="radio-group">
  479. <div class="radio-item">
  480. <input type="radio" id="nssY" name="nss" value="true" checked>
  481. <label for="nssY">Yes</label>
  482. </div>
  483. <div class="radio-item">
  484. <input type="radio" id="nssN" name="nss" value="false">
  485. <label for="nssN">No</label>
  486. </div>
  488. </div>
  489. <span class="text-danger" id="nssError"></span>
  490. </div>
  492. <div class="col-lg-12 col-md-12 mb-3">
  493. <label for="ncc">NCC Cadet<span class="req">*</span></label>
  494. <div class="radio-group">
  495. <div class="radio-item">
  496. <input type="radio" id="nccY" name="ncc" value="true" checked>
  497. <label for="male">Yes</label>
  498. </div>
  499. <div class="radio-item">
  500. <input type="radio" id="nccN" name="ncc" value="false">
  501. <label for="female">No</label>
  502. </div>
  504. </div>
  505. <span class="text-danger" id="nccError"></span>
  506. </div>
  508. </div> -->
  510. <!-- <h3>Employment Details</h3>
  511. <div class="form-row mb-4">
  512. <div class="col-lg-12 col-md-12 mb-3">
  513. <label for="occupation">Company/NGO Name (Enter NA if not working)</label>
  514. <input type="text" class="form-control" id="occupation"
  515. placeholder="Enter company/NGO...">
  516. </div>
  519. <div class="col-lg-12 col-md-12 mb-3" style="display:none;">
  520. <label for="designation">Designation</label>
  521. <input type="text" class="form-control" id="designation"
  522. placeholder="Enter Designation...">
  524. </div>
  525. </div> -->
  527. <!-- <h3>Other Information</h3> -->
  528. <div class="form-row mb-4">
  529. <!-- <div class="col-lg-12 col-md-12 mb-3">
  530. <label for="ngoAny">Company/NGO you are associated with,if any(NA otherwise)<span
  531. class="req">*</span></label>
  532. <input type="text" class="form-control" id="ngoAny" placeholder="">
  533. <span class="text-danger" id="ngoAnyError"></span>
  534. </div> -->
  535. <div class="col-lg-12 col-md-12 mb-3">
  536. <label for="prevol"><strong>நீங்கள் இதற்கு முன்பு ஏதேனும் அவசரகாலச் சூழ்நிலையில் தன்னார்வத் தொண்டு செய்திருக்கிறீர்களா?</strong><span
  537. class="req">*</span></label>
  538. <div class="radio-group">
  539. <div class="radio-item">
  540. <input type="radio" id="preVolY" name="preVol" value="true" checked>
  541. <label for="preVolY">ஆம்</label>
  542. </div>
  543. <div class="radio-item">
  544. <input type="radio" id="preVolN" name="preVol" value="false">
  545. <label for="preVolN">இல்லை</label>
  546. </div>
  548. </div>
  549. <span class="text-danger" id="prevolError"></span>
  550. </div>
  553. </div>
  555. <div class="form-row mb-4">
  556. <div class="col-lg-12 col-md-12 mb-3">
  557. <label for="docs">
  558. ஆவணம்<span class="req">*</span>
  559. </label>
  561. <select class="form-control" id="docs">
  563. </select>
  565. <span class="text-danger" id="docsError"></span>
  566. </div>
  567. </div>
  569. <!-- Dynamic fields -->
  570. <div class="form-row" id="documentFields"></div>
  572. </div>
  573. <!-- Individual Form -->
  576. <!-- Corporate Form -->
  577. <div class="corporate-form" id="corporate">
  580. <h3>தொடர்பு விவரங்கள்</h3>
  581. <div class="form-row mb-4">
  582. <div class="col-lg-12 col-md-12 mb-3">
  583. <label for="cmpName">நிறுவனத்தின் பெயர் <span class="req">*</span></label>
  584. <input type="text" class="form-control" id="cmpName" placeholder="நிறுவனத்தின் பெயரை உள்ளிடவும்">
  585. <span class="text-danger" id="cmpNameError"></span>
  586. </div>
  589. <div class="col-lg-12 col-md-12 mb-3">
  590. <label for="cmpEmail">நிறுவன மின்னஞ்சல் ஐடி</label>
  591. <input type="text" class="form-control" id="cmpEmail" placeholder="நிறுவன மின்னஞ்சல் முகவரியை உள்ளிடவும்">
  592. <span class="text-danger" id="cmpEmailError"></span>
  593. </div>
  597. </div>
  598. <div class="form-row mb-4" style="display:none;">
  599. <div class="col-lg-12 col-md-12 mb-3">
  600. <label for="cmpLandline">Phone</label>
  601. <div class="input-group mb-3">
  602. <div class="input-group-prepend">
  603. <span class="input-group-text" id="basic-ad">044</span>
  604. </div>
  605. <input type="text" class="form-control" id="cmpLandline"
  606. placeholder="Enter LandLine Number" aria-label="Mobile"
  607. aria-describedby="basic-addon1">
  608. </div>
  609. </div>
  611. <div class="col-lg-12 col-md-12 mb-3">
  612. <label for="cmpMobile">Mobile</label>
  613. <div class="input-group mb-3">
  614. <div class="input-group-prepend">
  615. <span class="input-group-text" id="basic-on1">+91</span>
  616. </div>
  617. <input type="text" class="form-control" id="cmpMobile"
  618. placeholder="Enter Mobile Number" aria-label="Mobile"
  619. aria-describedby="basic-addon1" minlength="10" maxlength="10"
  620. pattern="[6-9]{1}[0-9]{9}">
  621. </div>
  622. </div>
  625. </div>
  626. <div class="form-row mb-4">
  628. <div class="col-lg-12 col-md-12 mb-3">
  629. <label for="cmpDistrict">மாவட்டம் </label>
  630. <input type="text" class="form-control" id="cmpDistrict" value="Chennai" disabled>
  631. </div>
  633. </div>
  634. <div class="form-row mb-4">
  635. <div class="col-lg-12 col-md-12 mb-3">
  636. <label for="cmpAddress">முகவரி <span class="req">*</span></label>
  637. <input type="text" class="form-control" id="cmpAddress" placeholder="முகவரியை உள்ளிடவும்...">
  638. <span class="text-danger" id="cmpAddressError"></span>
  639. </div>
  642. <div class="col-lg-12 col-md-12 mb-3">
  643. <label for="cmpPincode">அஞ்சல் குறியீடு <span class="req">*</span></label>
  644. <input type="text" class="form-control" id="cmpPincode" minlength="6" maxlength="6"
  645. pattern="[0-9]{6}" placeholder="அஞ்சல் குறியீட்டை உள்ளிடவும்...">
  646. <span class="text-danger" id="cmpPincodeError"></span>
  648. </div>
  649. </div>
  652. <h4 class="">உங்கள் நிறுவனத்திலிருந்து தன்னார்வலர்களின் எண்ணிக்கை <span class="req">*</span></h4>
  653. <div class="form-row mb-4">
  654. <div class="col-lg-12 col-md-12 mb-3">
  655. <input type="number" class="form-control" id="cmpNov">
  656. <span class="text-danger" id="cmpNovError"></span>
  657. </div>
  658. </div>
  659. <h4>நிறுவனத்தில் தொடர்பு கொள்ள வேண்டிய நபர்</h4>
  660. <div class="form-row mb-4">
  661. <div class="col-lg-12 col-md-12 mb-3">
  662. <label for="cmpPoc">பெயர் <span class="req">*</span></label>
  663. <input type="text" class="form-control" id="cmpPoc" placeholder="பெயரை உள்ளிடவும்">
  664. <span class="text-danger" id="cmpPocError"></span>
  665. </div>
  666. <div class="col-lg-12 col-md-12 mb-3">
  667. <label for="cmdPod">பதவிப்பெயர் <span class="req">*</span></label>
  668. <input type="text" class="form-control" id="cmdPod" placeholder="பதவியை உள்ளிடவும்...">
  669. <span class="text-danger" id="cmdPodError"></span>
  670. </div>
  671. </div>
  672. <div class="form-row mb-4">
  674. <div class="col-lg-12 col-md-12 mb-3">
  675. <label for="cmdPoE">மின்னஞ்சல் முகவரி<span class="req">*</span></label>
  676. <input type="text" class="form-control" id="cmdPoE" placeholder="மின்னஞ்சல் முகவரியை உள்ளிடவும்...">
  677. <span class="text-danger" id="cmdPoEError"></span>
  679. </div>
  681. <div class="col-lg-12 col-md-12 mb-3">
  682. <label for="cmdPom">தொலைபேசி எண்<span class="req">*</span></label>
  683. <input type="text" class="form-control" id="cmdPom" placeholder="கைபேசி எண்ணை உள்ளிடவும்...">
  684. <span class="text-danger" id="cmdPomError"></span>
  685. </div>
  687. </div>
  689. <div class="form-row mb-4">
  691. <div class="col-lg-12 col-md-12 mb-3">
  692. <label for="comprevol">உங்கள் நிறுவனம் இதற்கு முன்னர் ஏதேனும் அவசரகாலச் சூழ்நிலையில் தன்னார்வத் தொண்டு செய்துள்ளதா?<span class="req">*</span></label>
  693. <div class="radio-group">
  694. <div class="radio-item">
  695. <input type="radio" id="cmpVolY" name="cmpPVol" value="true" checked>
  696. <label for="cmpVolY">ஆம் </label>
  697. </div>
  698. <div class="radio-item">
  699. <input type="radio" id="cmpVolN" name="cmpPVol" value="false">
  700. <label for="cmpVolN">இல்லை</label>
  701. </div>
  703. </div>
  704. <span class="text-danger" id="comprevolError"></span>
  705. </div>
  708. </div>
  709. </div>
  711. <!-- Corporate Form -->
  712. <!-- NGO Form -->
  713. <div class="ngo-form" id="ngo">
  716. <h3>தொடர்பு விவரங்கள்</h3>
  717. <div class="form-row mb-4">
  718. <div class="col-lg-12 col-md-12 col-sm-12 mb-3">
  719. <label for="ngoOrgName">நிறுவனத்தின் பெயர் <span class="req">*</span></label>
  720. <input type="text" class="form-control" id="ngoOrgName" placeholder="பெயரை உள்ளிடவும்">
  721. <span class="text-danger" id="ngoOrgNameError"></span>
  722. </div>
  725. <div class="col-lg-12 col-md-12 mb-3">
  726. <label for="ngoOrgEmail">நிறுவன மின்னஞ்சல் ஐடி</label>
  727. <input type="text" class="form-control" id="ngoOrgEmail" placeholder="மின்னஞ்சல் முகவரியை உள்ளிடவும்">
  728. <span class="text-danger" id="ngoOrgEmailError"></span>
  729. </div>
  733. </div>
  734. <div class="form-row mb-4" style="display:none;">
  735. <div class="col-lg-12 col-md-12 mb-3">
  736. <label for="oLandline">Phone</label>
  737. <div class="input-group mb-3">
  739. <div class="input-group-prepend">
  740. <span class="input-group-text" id="basic-aon1">044</span>
  741. </div>
  742. <input type="text" class="form-control" id="oLandline"
  743. placeholder="Enter Landline Number" aria-label="Mobile"
  744. aria-describedby="basic-addon1">
  745. </div>
  746. </div>
  748. <div class="col-lg-12 col-md-12 mb-3">
  749. <label for="oMobile">Mobile</label>
  750. <div class="input-group mb-3">
  751. <div class="input-group-prepend">
  752. <span class="input-group-text" id="basic-addon1">+91</span>
  753. </div>
  754. <input type="text" class="form-control" id="oMobile"
  755. placeholder="Enter Mobile Number" aria-label="Mobile"
  756. aria-describedby="basic-addon1">
  757. </div>
  758. </div>
  761. </div>
  762. <div class="form-row mb-4">
  764. <div class="col-lg-12 col-md-12 mb-3">
  765. <label for="oDistrict">மாவட்டம் </label>
  766. <input type="text" class="form-control" id="oDistrict" value="Chennai" disabled>
  767. </div>
  769. </div>
  770. <div class="form-row mb-4">
  771. <div class="col-lg-12 col-md-12 mb-3">
  772. <label for="oAddress">முகவரி <span class="req">*</span></label>
  773. <input type="text" class="form-control" id="oAddress" placeholder="முகவரியை உள்ளிடவும்...">
  774. <span class="text-danger" id="oAddressError"></span>
  775. </div>
  778. <div class="col-lg-12 col-md-12 mb-3">
  779. <label for="oPincode">அஞ்சல் குறியீடு<span class="req">*</span></label>
  780. <input type="picode" class="form-control" id="oPincode" minlength="6" maxlength="6"
  781. pattern="[0-9]{6}" placeholder="அஞ்சல் குறியீட்டை உள்ளிடவும்...">
  782. <span class="text-danger" id="oPincodeError"></span>
  784. </div>
  785. </div>
  788. <h4 class="volorg">உங்கள் அமைப்பிலிருந்து தன்னார்வலர்களின் எண்ணிக்கை<span class="req">*</span></h4>
  789. <div class="form-row mb-4">
  790. <div class="col-lg-12 col-md-12 mb-3">
  791. <input type="number" class="form-control" id="oNvol">
  792. <span class="text-danger" id="oNvolError"></span>
  793. </div>
  794. </div>
  795. <h4>நிறுவனத்தில் தொடர்பு கொள்ள வேண்டிய நபர் </h4>
  796. <div class="form-row mb-4">
  797. <div class="col-lg-12 col-md-12 mb-3">
  798. <label for="oPoc">பெயர் <span class="req">*</span></label>
  799. <input type="text" class="form-control" id="oPoc" placeholder="நபரின் பெயர்">
  800. <span class="text-danger" id="oPocError"></span>
  801. </div>
  802. <div class="col-lg-12 col-md-12 mb-3">
  803. <label for="oPod">பதவிப்பெயர்<span class="req">*</span></label>
  804. <input type="text" class="form-control" id="oPod" placeholder="பதவியை உள்ளிடவும்...">
  805. <span class="text-danger" id="oPodError"></span>
  806. </div>
  807. </div>
  808. <div class="form-row mb-4">
  809. <div class="col-lg-12 col-md-12 mb-3">
  810. <label for="oPoe">மின்னஞ்சல் முகவரி<span class="req">*</span></label>
  811. <input type="text" class="form-control" id="oPoE" placeholder="மின்னஞ்சல் முகவரியை உள்ளிடவும்...">
  812. <span class="text-danger" id="oPoeError"></span>
  813. </div>
  816. <div class="col-lg-12 col-md-12 mb-3">
  817. <label for="oPom">தொலைபேசி எண் <span class="req">*</span></label>
  818. <input type="text" class="form-control" id="oPom" placeholder="தொலைபேசி எண்ணை உள்ளிடவும்...">
  819. <span class="text-danger" id="oPomError"></span>
  820. </div>
  821. </div>
  823. <div class="form-row mb-4">
  825. <div class="col-lg-12 col-md-12 mb-3">
  826. <label for="oPvolY">உங்கள் அமைப்பு இதற்கு முன்னர் ஏதேனும் அவசரகாலச் சூழ்நிலைகளில் தன்னார்வத் தொண்டு செய்துள்ளதா?<span class="req">*</span></label>
  827. <div class="radio-group">
  828. <div class="radio-item">
  829. <input type="radio" id="oPvolY" name="oPvolY" value="true" checked>
  830. <label for="male">ஆம் </label>
  831. </div>
  832. <div class="radio-item">
  833. <input type="radio" id="oPvolN" name="oPvolY" value="false">
  834. <label for="female">இல்லை</label>
  835. </div>
  837. </div>
  838. <span class="text-danger" id="oPvolYError"></span>
  839. </div>
  842. </div>
  843. </div>
  845. <!-- NGO Form -->
  848. <div class="form-row">
  850. <div class="col-lg-12 col-md-12 mb-3">
  851. <label for="expertise">நிபுணத்துவத் துறை<span class="req">*</span></label>
  852. <select class="form-control" id="expertise">
  853. </select>
  854. <span class="text-danger" id="expertiseError"></span>
  855. </div>
  857. <!-- Dynamic Other Expertise field -->
  858. <div class="col-lg-12 col-md-12 mb-3" id="otherExpertiseContainer" style="display:none;">
  859. <label for="otherExpertise">
  860. மற்ற நிபுணத்துவத்தைக் குறிப்பிடவும்<span class="req">*</span>
  861. </label>
  863. <input type="text"
  864. class="form-control"
  865. id="other_expertise"
  866. placeholder="மற்ற நிபுணத்துவத்தைக் குறிப்பிடவும்"
  867. autocomplete="off">
  869. <span class="text-danger" id="otherExpertiseError"></span>
  870. </div>
  873. <div class="col-lg-12 col-md-12 mb-3">
  874. <label for="ephno">அவசரக்காலத் தொலைபேசி எண்<span class="req">*</span></label>
  875. <input type="text" class="form-control" id="ephno" placeholder="அவசரக்காலத் தொலைபேசி எண்" maxlength="10" inputmode="numeric" autocomplete="off" required="required">
  876. <span class="text-danger" id="ephnoError"></span>
  877. </div>
  880. </div>
  883. <!-- Preferred area of work checkboxes -->
  884. <h5>விருப்பமான பணியிடம்<span class="req">*</span></h5>
  885. <div class="form-check mb-3">
  886. <input class="form-check-input zone-checkbox" type="checkbox" id="anyArea" name="anyArea"
  887. value="0-any" onclick="checkAnyArea()">
  888. <label class="form-check-label" for="anyArea">சென்னையில் எந்தப் பகுதியிலும்</label>
  889. <span class="text-danger" id="anyAreaError"></span>
  890. </div>
  891. <div class="container mt-5">
  892. <!-- First Row of Zones -->
  893. <div class="form-row">
  894. <div class="col-6">
  895. <div class="form-check">
  896. <input class="form-check-input zone-checkbox" type="checkbox" id="zone1"
  897. name="zone1" value="1-Thiruvottiyur" onclick="checkAnyArea()">
  898. <label class="zone-checkbox-label" for="zone1">மண்டலம் 1 <br> (திருவொற்றியூர்)</label>
  899. </div>
  900. </div>
  901. <div class="col-6">
  902. <div class="form-check">
  903. <input class="form-check-input zone-checkbox" type="checkbox" id="zone2"
  904. name="zone2" value="2-Manali" onclick="checkAnyArea()">
  905. <label class="zone-checkbox-label" for="zone2">மண்டலம் 2 <br> (மணலி)</label>
  906. </div>
  907. </div>
  908. <div class="col-6">
  909. <div class="form-check">
  910. <input class="form-check-input zone-checkbox" type="checkbox" id="zone3"
  911. name="zone3" value="3-Madhavaram" onclick="checkAnyArea()">
  912. <label class="zone-checkbox-label" for="zone3">மண்டலம் 3 <br>(மாதவரம்)</label>
  913. </div>
  914. </div>
  915. <div class="col-6">
  916. <div class="form-check">
  917. <input class="form-check-input zone-checkbox" type="checkbox" id="zone4"
  918. name="zone4" value="4-Tondiarpet" onclick="checkAnyArea()">
  919. <label class="zone-checkbox-label" for="zone4">மண்டலம் 4 <br>(தண்டையார்பேட்டை)</label>
  920. </div>
  921. </div>
  922. </div>
  924. <!-- Second Row of மண்டலம்s -->
  925. <div class="form-row mt-2">
  926. <div class="col-6">
  927. <div class="form-check">
  928. <input class="form-check-input zone-checkbox" type="checkbox" id="zone5"
  929. name="zone5" value="5-Royapuram" onclick="checkAnyArea()">
  930. <label class="zone-checkbox-label" for="zone5">மண்டலம் 5<br> (ராயபுரம்)</label>
  931. </div>
  932. </div>
  933. <div class="col-6">
  934. <div class="form-check">
  935. <input class="form-check-input zone-checkbox" type="checkbox" id="zone6"
  936. name="zone6" value="6-ThiruViKa Nagar" onclick="checkAnyArea()">
  937. <label class="zone-checkbox-label" for="zone6">மண்டலம் 6 <br>(திரு-வி-க நகர்)</label>
  938. </div>
  939. </div>
  940. <div class="col-6">
  941. <div class="form-check">
  942. <input class="form-check-input zone-checkbox" type="checkbox" id="zone7"
  943. name="zone7" value="7-Ambattur" onclick="checkAnyArea()">
  944. <label class="zone-checkbox-label" for="zone7">மண்டலம் 7<br> (அம்பத்தூர்)</label>
  945. </div>
  946. </div>
  947. <div class="col-6">
  948. <div class="form-check">
  949. <input class="form-check-input zone-checkbox" type="checkbox" id="zone8"
  950. name="zone8" value="8-Anna Nagar" onclick="checkAnyArea()">
  951. <label class="zone-checkbox-label" for="zone8">மண்டலம் 8<br> (அண்ணா நகர்)</label>
  952. </div>
  953. </div>
  954. </div>
  956. <!-- Third Row of மண்டலம்s -->
  957. <div class="form-row mt-2">
  958. <div class="col-6">
  959. <div class="form-check">
  960. <input class="form-check-input zone-checkbox" type="checkbox" id="zone9"
  961. name="zone9" value="9-Teynampet" onclick="checkAnyArea()">
  962. <label class="zone-checkbox-label" for="zone9">மண்டலம் 9 <br>(தேனாம்பேட்டை)</label>
  963. </div>
  964. </div>
  965. <div class="col-6">
  966. <div class="form-check">
  967. <input class="form-check-input zone-checkbox" type="checkbox" id="zone10"
  968. name="zone10" value="10-Kodambakkam" onclick="checkAnyArea()">
  969. <label class="zone-checkbox-label" for="zone10">மண்டலம் 10<br> (கோடம்பாக்கம்)</label>
  970. </div>
  971. </div>
  972. <div class="col-6">
  973. <div class="form-check">
  974. <input class="form-check-input zone-checkbox" type="checkbox" id="zone11"
  975. name="zone11" value="11-Valasarvakkam" onclick="checkAnyArea()">
  976. <label class="zone-checkbox-label" for="zone11">மண்டலம் 11<br> (வளசரவாக்கம்)</label>
  977. </div>
  978. </div>
  979. <div class="col-6">
  980. <div class="form-check">
  981. <input class="form-check-input zone-checkbox" type="checkbox" id="zone12"
  982. name="zone12" value="12-Alandur" onclick="checkAnyArea()">
  983. <label class="zone-checkbox-label" for="zone12">மண்டலம் 12<br> (ஆலந்தூர்)</label>
  984. </div>
  985. </div>
  986. </div>
  988. <!-- Fourth Row of மண்டலம்s -->
  989. <div class="form-row mt-2">
  990. <div class="col-6">
  991. <div class="form-check">
  992. <input class="form-check-input zone-checkbox" type="checkbox" id="zone13"
  993. name="zone13" value="13-Adyar" onclick="checkAnyArea()">
  994. <label class="zone-checkbox-label" for="zone13">மண்டலம் 13<br> (அடையார்)</label>
  995. </div>
  996. </div>
  997. <div class="col-6">
  998. <div class="form-check">
  999. <input class="form-check-input zone-checkbox" type="checkbox" id="zone14"
  1000. name="zone14" value="14-Perungudi" onclick="checkAnyArea()">
  1001. <label class="zone-checkbox-label" for="zone14">மண்டலம் 14<br> (பெருங்குடி)</label>
  1002. </div>
  1003. </div>
  1004. <div class="col-6">
  1005. <div class="form-check">
  1006. <input class="form-check-input zone-checkbox" type="checkbox" id="zone15"
  1007. name="zone15" value="15-Sholinganallur" onclick="checkAnyArea()">
  1008. <label class="zone-checkbox-label" for="zone15">மண்டலம் 15 <br>(சோழிங்கநல்லூர்)</label>
  1009. </div>
  1010. </div>
  1011. </div>
  1012. </div>
  1014. <center>
  1015. <!-- <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button> -->
  1016. <button type="button" class="btn btn-primary" id="submitBtn" onclick="validateForm()">சமர்ப்பிக்கவும்</button>
  1018. </center>
  1019. </div>
  1020. </div>
  1021. </form>
  1022. </div>
  1025. <div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
  1026. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  1027. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  1028. <span class="sr-only">Loading...</span>
  1029. </div>
  1030. <!-- Add the 'Please wait' text below the spinner -->
  1031. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  1032. </div>
  1033. </div>
  1035. <!-- OTP Modal -->
  1036. <div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true">
  1037. <div class="modal-dialog" role="document">
  1038. <div class="modal-content">
  1039. <form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
  1040. onsubmit="return verifyOtp();">
  1041. <div class="modal-header">
  1042. <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
  1043. <button type="button" class="close" data-dismiss="modal" aria-label="Close"
  1044. style="color:black;border: white;background-color: white;">
  1045. <span aria-hidden="true">&times;</span>
  1046. </button>
  1049. </div>
  1050. <!-- End modal-header -->
  1051. <div class="modal-body">
  1052. <div class="row ">
  1053. <div class="mb-3" style="text-align: center;">
  1054. <img src="https://gccservices.in/gcc/files/c_d/otp.png" width="50%" alt="Mobileotp">
  1055. </div>
  1056. </div>
  1057. <!-- End row -->
  1059. <div class="row d-flex justify-content-center align-items-center">
  1060. <div class="mb-0">
  1061. <h4>OTP Verification</h4>
  1062. <p class="text-mute">Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b>
  1063. </p>
  1064. <p class="text-danger" id="otperror"></p>
  1065. </div>
  1066. </div>
  1067. <!-- End row -->
  1068. <div class="row d-flex justify-content-center align-items-center">
  1069. <div class="mb-3 ">
  1070. <div class="otp-input-box">
  1071. <input type="text" maxlength="1" class="otp-input" id="otp1" required />
  1072. <input type="text" maxlength="1" class="otp-input" id="otp2" required />
  1073. <input type="text" maxlength="1" class="otp-input" id="otp3" required />
  1074. <input type="text" maxlength="1" class="otp-input" id="otp4" required />
  1075. <input type="text" maxlength="1" class="otp-input" id="otp5" required />
  1076. </div>
  1077. </div>
  1078. </div>
  1079. <!-- End row -->
  1080. <!--<div class="row d-flex justify-content-center align-items-center">
  1081. <div class="mb-3">
  1082. <div id="resend-containers">
  1083. <p class="mb-0 text-info" id="resendlink"></p>
  1084. </div>
  1085. </div>
  1086. </div>-->
  1087. <!-- End row -->
  1089. </div>
  1090. <!-- End modal-body -->
  1091. <div class="modal-footer">
  1092. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  1093. <button type="submit" class="btn btn-primary" id="but">Verify OTP</button>
  1094. </div>
  1095. <!-- End modal-footer -->
  1096. </form>
  1097. </div>
  1098. <!-- End modal-content -->
  1099. </div>
  1100. <!-- End modal-dialog -->
  1101. </div>
  1102. <!-- End OTP Modal -->
  1106. <script>
  1110. document.querySelector('.individual-form').style.display = 'none';
  1111. document.querySelector('.corporate-form').style.display = 'none';
  1112. document.querySelector('.ngo-form').style.display = 'none';
  1113. /* function handleCategoryChange() {
  1114. // Get selected category
  1115. var category = document.getElementById("category").value;
  1117. // Hide all forms
  1118. document.querySelector('.individual-form').style.display = 'none';
  1119. document.querySelector('.corporate-form').style.display = 'none';
  1120. document.querySelector('.ngo-form').style.display = 'none';
  1122. // Clear subcategory options
  1123. var subcategory = document.getElementById("subcategory");
  1124. subcategory.innerHTML = '<option value="-1">Select</option>';
  1126. // Show the corresponding form and set subcategory options
  1127. if (category === "Individual") {
  1128. document.querySelector('.individual-form').style.display = 'block';
  1129. subcategory.innerHTML += `
  1130. <option value="Medical Assistance/Counselling Service">Medical Assistance/Counselling Service</option>
  1131. <option value="Cooks & Assistance">Cooks & Assistance</option>
  1132. <option value="General Assistance">General Assistance</option>
  1133. <option value="Distribution/Delivery Support">Distribution/Delivery Support</option>
  1134. <option value="Centre Admin Support">Centre Admin Support</option>
  1135. <option value="Graphic Designers">Graphic Designers</option>
  1136. <option value="Call Centre Support">Call Centre Support</option>
  1137. <option value="Survey">Survey</option>
  1138. `;
  1139. } else if (category === "Corporate") {
  1140. document.querySelector('.corporate-form').style.display = 'block';
  1141. subcategory.innerHTML += `<option value="N/A">N/A</option>`;
  1142. } else if (category === "NGO") {
  1143. document.querySelector('.ngo-form').style.display = 'block';
  1144. subcategory.innerHTML += `<option value="N/A">N/A</option>`;
  1145. }
  1146. } */
  1148. $("#name").on("input", function () {
  1149. this.value = this.value.replace(/[^a-zA-Z.\s]/g, '');
  1150. });
  1151. $("#cmpPoc").on("input", function () {
  1152. this.value = this.value.replace(/[^a-zA-Z.\s]/g, '');
  1153. });
  1155. $("#oPoc").on("input", function () {
  1156. this.value = this.value.replace(/[^a-zA-Z.\s]/g, '');
  1157. });
  1159. $("#dob").on("keydown paste drop", function (e) {
  1160. e.preventDefault();
  1161. });
  1163. $("#pincode").on("input", function () {
  1164. this.value = this.value.replace(/\D/g, '').slice(0, 6);
  1165. });
  1167. $("#ephno").on("input", function () {
  1168. this.value = this.value.replace(/\D/g, '').slice(0, 10);
  1169. });
  1172. $("#mobile").on("input", function () {
  1173. this.value = this.value.replace(/\D/g, '').slice(0, 10);
  1174. });
  1176. $("#cmdPom").on("input", function () {
  1177. this.value = this.value.replace(/\D/g, '').slice(0, 10);
  1178. });
  1180. $("#oPom").on("input", function () {
  1181. this.value = this.value.replace(/\D/g, '').slice(0, 10);
  1182. });
  1185. $("#expertise").on("change", function () {
  1187. var selectedOption = $(this).find("option:selected");
  1189. var selectedId = selectedOption.val();
  1190. var expertiseArea = selectedOption.attr("data-category") || "";
  1192. // Check ID = 7 OR expertise contains "Others"
  1193. var isOtherExpertise =
  1194. selectedId === "7" ||
  1195. expertiseArea.toLowerCase().includes("others");
  1197. if (isOtherExpertise) {
  1199. $("#otherExpertiseContainer").show();
  1201. } else {
  1203. $("#otherExpertiseContainer").hide();
  1205. // Clear previous value and error
  1206. $("#other_expertise").val("");
  1207. $("#otherExpertiseError").text("");
  1208. }
  1209. });
  1211. $(document).ready(function () {
  1212. $.ajax({
  1213. url: "/volunteer/api/registration/getAllCategory",
  1214. type: "GET",
  1215. success: function (categories) {
  1216. let categoryDropdown = $('#category');
  1217. categoryDropdown.append(`<option value="-1">Select</option>`);
  1219. categories.forEach(function (cat) {
  1221. $('<option>', {
  1222. value: cat.id,
  1223. text: cat.category_tamil
  1224. }).attr('data-category', cat.category)
  1225. .appendTo(categoryDropdown);
  1227. });
  1228. }
  1229. });
  1231. $.ajax({
  1232. url: "/volunteer/api/registration/getAllExpertise",
  1233. type: "GET",
  1234. success: function (expertise) {
  1235. let expertiseDropdown = $('#expertise');
  1236. expertiseDropdown.empty();
  1237. expertiseDropdown.append(`<option value="">Select</option>`);
  1238. expertise.forEach(function (exp) {
  1240. $('<option>', {
  1241. value: exp.id,
  1242. text: exp.expertise_area_tamil
  1243. }).attr('data-category', exp.expertise_area_tamil)
  1244. .appendTo(expertiseDropdown);
  1246. });
  1247. }
  1248. });
  1250. });
  1252. $("#docs").on("change", function () {
  1254. var selectedOption = $(this).find("option:selected");
  1256. var labelName = selectedOption.attr("data-category") || "";
  1258. var option = $(this).val();
  1259. var documentFields = $("#documentFields");
  1261. documentFields.empty();
  1262. $("#docsError").text("");
  1264. if (option === "-1" || option === "") {
  1265. return;
  1266. }
  1268. var optionName = labelName;
  1270. var html = `
  1271. <div class="col-lg-12 col-md-12 mb-3">
  1272. <label for="doc_number">
  1273. ${optionName} எண்<span class="req">*</span>
  1274. </label>
  1276. <input type="text"
  1277. class="form-control"
  1278. id="doc_number"
  1279. name="doc_number"
  1280. placeholder="${optionName} எண்..."
  1281. autocomplete="off">
  1283. <span class="text-danger" id="docNumberError"></span>
  1284. </div>
  1286. <div class="col-lg-12 col-md-12 mb-3">
  1287. <label for="doc_url">
  1288. ${optionName} படம் (20 MB-க்கும் குறைவானது - jpg/jpeg/pdf)<span class="req">*</span>
  1289. </label>
  1291. <input type="file"
  1292. class="form-control"
  1293. id="doc_url"
  1294. name="doc_url"
  1295. accept=".pdf,.jpg,.jpeg">
  1297. <span class="text-danger" id="docFileError"></span>
  1298. </div>
  1299. `;
  1301. documentFields.html(html);
  1302. });
  1304. function handleCategoryChange() {
  1305. var categoryId = $('#category').val();
  1307. // Hide all forms
  1308. $('.individual-form, .corporate-form, .ngo-form').hide();
  1310. // Clear and reset subcategory dropdown
  1311. let subcategory = $('#subcategory');
  1312. subcategory.empty().append('<option value="-1">Select</option>');
  1314. // Determine form visibility based on selected category name
  1315. //let selectedText = $('#category option:selected').text();
  1316. let selectedText = $('#category').val();
  1318. /* if (selectedText === "Individual") {
  1319. $('.individual-form').show();
  1320. } else if (selectedText === "Corporate") {
  1321. $('.corporate-form').show();
  1322. } else if (selectedText === "NGO/Other Associations") {
  1323. $('.ngo-form').show();
  1324. } */
  1325. if (selectedText === "1") {
  1327. $.ajax({
  1328. url: "/volunteer/api/registration/getAllVolunteerDocs",
  1329. type: "GET",
  1330. success: function (docsvalues) {
  1331. let docsDropdown = $('#docs');
  1332. docsDropdown.empty();
  1333. docsDropdown.append(`<option value="">Select</option>`);
  1334. docsvalues.forEach(function (docs) {
  1336. $('<option>', {
  1337. value: docs.id,
  1338. text: docs.tamil_name
  1339. }).attr('data-category', docs.tamil_name)
  1340. .appendTo(docsDropdown);
  1342. });
  1343. }
  1344. });
  1346. $('.individual-form').show();
  1347. } else if (selectedText === "2") {
  1348. $('.corporate-form').show();
  1349. } else if (selectedText === "3") {
  1350. $('.ngo-form').show();
  1351. }
  1355. // Fetch subcategories
  1356. if (categoryId !== "-1") {
  1357. $.ajax({
  1358. url: "/volunteer/api/registration/getSubCategoryById",
  1359. type: "GET",
  1360. data: { category_id: categoryId },
  1361. success: function (subcategories) {
  1362. subcategories.forEach(function (sub) {
  1364. $('<option>', {
  1365. value: sub.id,
  1366. text: sub.sub_category_tamil
  1367. }).attr('data-sub-category', sub.sub_category)
  1368. .appendTo(subcategory);
  1370. });
  1371. }
  1372. });
  1373. }
  1374. }
  1376. function uncheckAnyArea() {
  1378. }
  1379. function checkAnyArea() {
  1380. var anyArea = document.getElementById("anyArea").checked;
  1381. if (anyArea) {
  1382. for (var i = 1; i <= 15; i++) {
  1383. document.getElementById("zone" + i).checked = false;
  1384. }
  1385. }
  1386. }
  1388. let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  1389. let mobilePattern = /^[0-9]{10}$/;
  1390. let pincodePattern = /^[0-9]{6}$/;
  1392. function validateForm() {
  1396. var isValid = true;
  1397. $('.text-danger').text('');
  1398. var i = 0;
  1399. $(".zone-checkbox:checked").each(function () {
  1400. if ($(this).val()) {
  1401. i++;
  1402. };
  1403. });
  1404. var category = document.getElementById("category");
  1405. //var selectedTextcategory = category.options[category.selectedIndex].text;
  1406. var selectedTextcategory = $('#category').val();
  1408. //console.log("selectedTextcategory=="+selectedTextcategory);
  1409. if (selectedTextcategory === "Select" || selectedTextcategory === "-1" || selectedTextcategory === "") {
  1410. $("#categoryError").text("தயவுசெய்து வகையைத் தேர்ந்தெடுக்கவும்.");
  1411. isValid = false;
  1412. }
  1413. var subcategory = document.getElementById("subcategory");
  1414. var selectedTextsubcategory = subcategory.options[subcategory.selectedIndex].text;
  1415. var selectedTextsubcategory = $('#subcategory').val();
  1417. //console.log("selectedTextsubcategory=="+selectedTextsubcategory);
  1418. if (selectedTextsubcategory === "Select" || selectedTextsubcategory === "-1" || selectedTextsubcategory === "") {
  1419. $("#subcategoryError").text("தயவுசெய்து துணைப்பிரிவைத் தேர்ந்தெடுக்கவும்.");
  1420. isValid = false;
  1421. }
  1424. var ephno = $.trim($("#ephno").val());
  1425. //console.log("ephno===="+ephno);
  1427. if (ephno === "") {
  1429. $("#ephnoError").text("அவசரகாலத் தொலைபேசி எண்ணை உள்ளிடவும்");
  1430. isValid = false;
  1432. } else if (!/^\d{10}$/.test(ephno)) {
  1434. $("#ephnoError").text("தொலைபேசி எண் சரியாக 10 இலக்கங்களைக் கொண்டிருக்க வேண்டும்");
  1435. isValid = false;
  1437. } else if (!/^[6-9]/.test(ephno)) {
  1439. $("#ephnoError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்");
  1440. isValid = false;
  1442. }else if (/^(\d)\1{9}$/.test(ephno)) {
  1444. $("#ephnoError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
  1445. isValid = false;
  1447. } else if (
  1448. ephno === "1234567890" ||
  1449. ephno === "0123456789" ||
  1450. ephno === "9876543210" ||
  1451. ephno === "0987654321"
  1452. ) {
  1454. $("#ephnoError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
  1455. isValid = false;
  1456. }
  1458. var selectedEOption = $("#expertise option:selected");
  1460. var expertisevalue = $.trim(selectedEOption.val());
  1461. var expertiseArea = $.trim(selectedEOption.attr("data-category") || "");
  1463. if (expertisevalue === "" || expertisevalue === "-1") {
  1465. $("#expertiseError").text("நிபுணத்துவம் உள்ள துறையைத் தேர்ந்தெடுக்கவும்");
  1466. isValid = false;
  1468. } else if (
  1469. expertisevalue === "7" ||
  1470. expertiseArea.toLowerCase().includes("others")
  1471. ) {
  1473. var otherExpertise = $.trim($("#other_expertise").val());
  1475. if (otherExpertise === "") {
  1477. $("#otherExpertiseError").text("மற்ற நிபுணத்துவத்தைக் குறிப்பிடவும்");
  1478. isValid = false;
  1479. }
  1480. }
  1484. if (selectedTextcategory === "1") {
  1486. var name = document.getElementById("name").value = document.getElementById("name").value.trim();
  1487. var email = document.getElementById("email").value = document.getElementById("email").value.trim();
  1488. let genderSelected = document.querySelector('input[name="gender"]:checked');
  1489. var mobile = document.getElementById("mobile").value = document.getElementById("mobile").value.trim();
  1490. var address = document.getElementById("address").value = document.getElementById("address").value.trim();
  1491. var pincode = document.getElementById("pincode").value = document.getElementById("pincode").value.trim();
  1492. //var edu = document.getElementById("edu").value = document.getElementById("edu").value.trim();
  1493. //var college = document.getElementById("college").value = document.getElementById("college").value.trim();
  1494. //let nssSelected = document.querySelector('input[name="nss"]:checked');
  1495. //let nccSelected = document.querySelector('input[name="ncc"]:checked');
  1496. // var occupation = document.getElementById("occupation").value= document.getElementById("occupation").value.trim();
  1497. // var designation = document.getElementById("designation").value= document.getElementById("designation").value.trim();
  1498. let preVolSelected = document.querySelector('input[name="preVol"]:checked');
  1499. //var ngoAny = document.getElementById("ngoAny").value = document.getElementById("ngoAny").value.trim();
  1500. var dob = document.getElementById("dob").value = document.getElementById("dob").value.trim();
  1501. //var aadhar = document.getElementById("aadhar").value = document.getElementById("aadhar").value.trim();
  1502. //var bloodgroup = document.getElementById("bloodgroup").value;
  1506. if (name == undefined || name == "") {
  1507. $("#nameError").text("தயவுசெய்து பெயரை உள்ளிடவும்.");
  1508. isValid = false;
  1509. }
  1511. if (dob == undefined || dob == "") {
  1512. $("#dobError").text("தயவுசெய்து பிறந்த தேதியை உள்ளிடவும்.");
  1513. isValid = false;
  1514. }
  1515. if(email!=""){
  1516. if (!emailPattern.test(email)) {
  1517. $("#emailError").text("தயவுசெய்து சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
  1518. isValid = false;
  1519. }
  1520. }
  1521. if (!genderSelected) {
  1522. $("#genderError").text("தயவுசெய்து பாலினத்தைத் தேர்ந்தெடுக்கவும்.");
  1523. isValid = false;
  1524. }
  1525. // Check if verifiedOTP is disabled only during form submission
  1526. if ($('#verifiedOTP').prop('disabled')) {
  1527. Swal.fire({
  1528. title: "Warning!",
  1529. text: "OTP not Verified",
  1530. icon: "warning",
  1531. confirmButtonText: "OK"
  1532. });
  1533. isValid = false; // Set isValid to false if verifiedOTP is disabled
  1534. }
  1535. if (mobile === "" || !mobilePattern.test(mobile)) {
  1536. $("#mobileError").text("தயவுசெய்து சரியான 10 இலக்க அலைபேசி எண்ணை உள்ளிடவும்.");
  1537. isValid = false;
  1538. }
  1540. if (!/^\d{10}$/.test(mobile)) {
  1542. $("#mobileError").text("தொலைபேசி எண்ணில் சரியாக 10 இலக்கங்கள் இருக்க வேண்டும்.");
  1543. isValid = false;
  1545. } if (!/^[6-9]/.test(mobile)) {
  1547. $("#mobileError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்.");
  1548. isValid = false;
  1550. } if (/^(\d)\1{9}$/.test(mobile)) {
  1552. $("#mobileError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
  1553. isValid = false;
  1555. } if (
  1556. mobile === "1234567890" ||
  1557. mobile === "0123456789" ||
  1558. mobile === "9876543210" ||
  1559. mobile === "0987654321"
  1560. ) {
  1562. $("#mobileError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
  1563. isValid = false;
  1564. }
  1566. if (address == undefined || address == "") {
  1567. $("#addressError").text("தயவுசெய்து முகவரியை உள்ளிடவும்.");
  1568. isValid = false;
  1569. }
  1570. // Pincode validation
  1571. if (pincode === "" || !pincodePattern.test(pincode)) {
  1572. $("#pincodeError").text("தயவுசெய்து செல்லுபடியாகும் 6 இலக்க அஞ்சல் குறியீட்டை உள்ளிடவும்.");
  1573. isValid = false;
  1574. }
  1575. /* if (edu == undefined || edu == "") {
  1576. $("#eduError").text("Please Enter Education details !");
  1577. isValid = false;
  1578. }
  1579. if (college == undefined || college == "") {
  1580. $("#collegeError").text("Please Enter college details !");
  1581. isValid = false;
  1582. }
  1583. if (aadhar == undefined || aadhar == "") {
  1584. $("#aadharError").text("Please Enter Aadhar details !");
  1585. isValid = false;
  1586. }
  1587. if (bloodgroup == -1) {
  1588. $("#bloodgroupError").text("Please Select Blood Group !");
  1589. isValid = false;
  1590. }
  1591. if (!nssSelected) {
  1592. $("#nssError").text("Please Select NSS details !");
  1593. isValid = false;
  1594. }
  1595. if (!nccSelected) {
  1596. $("#nccError").text("Please Select NCC details !");
  1597. isValid = false;
  1598. }*/
  1600. var docs = $.trim($("#docs").val());
  1602. if (docs === "" || docs === "-1") {
  1604. $("#docsError").text("ஆவணத்தைத் தேர்ந்தெடுக்கவும்");
  1605. isValid = false;
  1607. } else {
  1609. // Get selected document name
  1610. var selectedOption = $("#docs option:selected");
  1611. var documentName = $.trim(selectedOption.attr("data-category") || "");
  1613. // -----------------------------
  1614. // Document Number Validation
  1615. // -----------------------------
  1616. var docNumber = $.trim($("#doc_number").val());
  1618. if (docNumber === "") {
  1620. $("#docNumberError").text("" + documentName + " எண்ணை உள்ளிடவும்");
  1621. isValid = false;
  1623. }
  1624. if (docs === "1") {
  1626. // Aadhar = exactly 12 numeric digits
  1627. if (!/^\d{12}$/.test(docNumber)) {
  1629. $("#docNumberError").text(
  1630. "ஆதார் எண் சரியாக 12 இலக்கங்களைக் கொண்டிருக்க வேண்டும்"
  1631. );
  1633. isValid = false;
  1634. }
  1636. } else {
  1638. // Other documents = alphanumeric, max 10 characters
  1639. if (!/^[a-zA-Z0-9]{10}$/.test(docNumber)) {
  1641. $("#docNumberError").text(
  1642. documentName + " எண்ணில் எழுத்துக்கள் மற்றும் எண்கள் மட்டுமே இருக்க வேண்டும் (அதிகபட்சம் 10 எழுத்துக்கள்)"
  1643. );
  1645. isValid = false;
  1646. }
  1647. }
  1650. // -----------------------------
  1651. // Document File Validation
  1652. // -----------------------------
  1653. var docFileInput = $("#doc_url")[0];
  1655. if (!docFileInput || docFileInput.files.length === 0) {
  1657. $("#docFileError").text(
  1658. " " + documentName + " தேர்ந்தெடுக்கவும் "
  1659. );
  1661. isValid = false;
  1663. } else {
  1665. var docFile = docFileInput.files[0];
  1667. // Maximum 20 MB
  1668. var maxSize = 20 * 1024 * 1024;
  1670. if (docFile.size >= maxSize) {
  1672. $("#docFileError").text(
  1673. "அளவு 20 MB-க்குக் குறைவாக இருக்க வேண்டும்"
  1674. );
  1676. isValid = false;
  1677. }
  1679. // File type
  1680. var allowedTypes = [
  1681. "image/jpeg",
  1682. "application/pdf"
  1683. ];
  1685. if (!allowedTypes.includes(docFile.type)) {
  1687. $("#docFileError").text(
  1688. "JPG, JPEG அல்லது PDF கோப்புகள் மட்டுமே அனுமதிக்கப்படும்"
  1689. );
  1691. isValid = false;
  1692. }
  1693. }
  1694. }
  1697. if (!preVolSelected) {
  1698. $("#prevolError").text("தயவுசெய்து முந்தைய தன்னார்வலர் விவரங்களைத் தேர்ந்தெடுக்கவும்.");
  1699. isValid = false;
  1700. }
  1702. var cmobile = $.trim($("#mobile").val());
  1704. if(cmobile !== "" && ephno !== "" && cmobile === ephno){
  1705. Swal.fire({
  1706. title: "Warning!",
  1707. text: "கைபேசி எண்ணும் அவசரக்காலத் தொலைபேசி எண்ணும் ஒன்றாக இருக்கக்கூடாது",
  1708. icon: "warning",
  1709. confirmButtonText: "OK"
  1710. });
  1711. isValid = false;
  1712. }
  1714. /* if (ngoAny == undefined || ngoAny == "") {
  1715. $("#ngoAnyError").text("Please Enter Company/NGO details !");
  1716. isValid = false;
  1717. } */
  1718. if (i == 0) {
  1719. $("#anyAreaError").text("விருப்பமான பகுதி விவரங்களைத் தேர்ந்தெடுக்கவும்.");
  1720. isValid = false;
  1721. }
  1724. if (isValid) {
  1725. $("#submitBtn").prop("disabled", true);
  1726. saveTheIndividualForm();
  1727. return false;
  1728. }
  1729. else{
  1730. var firstError = $(".text-danger")
  1731. .filter(function () {
  1732. return $.trim($(this).text()) !== "";
  1733. })
  1734. .first();
  1735. if (firstError.length) {
  1737. var target = firstError
  1738. .closest(".mb-3")
  1739. .find("input, select, textarea")
  1740. .first();
  1742. if (target.length) {
  1744. $("html, body").animate({
  1745. scrollTop: target.offset().top - 120
  1746. }, 600);
  1748. // Focus the field
  1749. target.focus();
  1751. }else {
  1753. // Fallback to error message
  1754. $("html, body").animate({
  1755. scrollTop: firstError.offset().top - 120
  1756. }, 600);
  1757. }
  1758. }
  1759. }
  1760. return false;
  1761. }
  1762. else if (selectedTextcategory === "2") {
  1763. var cmpName = document.getElementById("cmpName").value = document.getElementById("cmpName").value.trim();
  1764. var cmpEmail = document.getElementById("cmpEmail").value = document.getElementById("cmpEmail").value.trim();
  1765. var cmpLandline = document.getElementById("cmpLandline").value = document.getElementById("cmpLandline").value.trim();
  1766. var cmpMobile = document.getElementById("cmpMobile").value = document.getElementById("cmpMobile").value.trim();
  1767. var cmpAddress = document.getElementById("cmpAddress").value = document.getElementById("cmpAddress").value.trim();
  1768. var cmpPincode = document.getElementById("cmpPincode").value = document.getElementById("cmpPincode").value.trim();
  1769. var cmpNov = document.getElementById("cmpNov").value = document.getElementById("cmpNov").value.trim();
  1770. var cmpPoc = document.getElementById("cmpPoc").value = document.getElementById("cmpPoc").value.trim();
  1771. var cmdPom = document.getElementById("cmdPom").value = document.getElementById("cmdPom").value.trim();
  1772. var cmpPVolSelect = document.querySelector('input[name="cmpPVol"]:checked');
  1773. var cmdPoE = document.getElementById("cmdPoE").value = document.getElementById("cmdPoE").value.trim();
  1774. var cmdPod = $("#cmdPod").val().trim();
  1776. if (cmpName == undefined || cmpName == "") {
  1777. $("#cmpNameError").text("தயவுசெய்து நிறுவனத்தின் பெயரை உள்ளிடவும்.");
  1778. isValid = false;
  1779. }
  1780. if(cmpEmail!=""){
  1781. if (!emailPattern.test(cmpEmail)) {
  1782. $("#cmpEmailError").text("சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
  1783. isValid = false;
  1784. }
  1785. }
  1786. if (cmpAddress == undefined || cmpAddress == "") {
  1787. $("#cmpAddressError").text("தயவுசெய்து நிறுவனத்தின் முகவரியை உள்ளிடவும்.");
  1788. isValid = false;
  1789. }
  1790. if (cmpPincode == undefined || cmpPincode == "") {
  1791. $("#cmpPincodeError").text("தயவுசெய்து அஞ்சல் குறியீட்டை உள்ளிடவும். ");
  1792. isValid = false;
  1793. }
  1794. if (cmpNov == undefined || cmpNov == "") {
  1795. $("#cmpNovError").text("தயவுசெய்து தன்னார்வலர்களின் எண்ணிக்கையை உள்ளிடவும்.");
  1796. isValid = false;
  1797. }
  1798. if (!/^[1-9]\d*$/.test(cmpNov)) {
  1800. $("#cmpNovError").text("சரியான எண்ணிக்கையிலான தன்னார்வலர்களை உள்ளிடவும்.");
  1801. isValid = false;
  1803. }
  1804. if (cmpPoc == undefined || cmpPoc == "") {
  1805. $("#cmpPocError").text("நடத்தைக்கான பொறுப்பாளர் பெயரை உள்ளிடவும்.");
  1806. isValid = false;
  1807. }
  1808. if (cmdPod == "") {
  1809. $("#cmdPodError").text("நடத்தைக்கான பொறுப்பாளர் பதவியைக் குறிப்பிடவும்");
  1810. isValid = false;
  1811. }
  1812. if (cmdPoE === "" || !emailPattern.test(cmdPoE)) {
  1813. $("#cmdPoEError").text("தொடர்பு கொள்ள வேண்டியவருக்கான சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
  1814. isValid = false;
  1815. }
  1816. if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
  1817. $("#cmdPomError").text("தொடர்பு கொள்ள வேண்டியவரின் செல்லுபடியாகும் அலைபேசி எண்ணை உள்ளிடவும்.");
  1818. isValid = false;
  1819. }
  1821. if (!/^\d{10}$/.test(cmdPom)) {
  1823. $("#cmdPomError").text("தொலைபேசி எண்ணில் சரியாக 10 இலக்கங்கள் இருக்க வேண்டும்.");
  1824. isValid = false;
  1826. } if (!/^[6-9]/.test(cmdPom)) {
  1828. $("#cmdPomError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்.");
  1829. isValid = false;
  1831. } if (/^(\d)\1{9}$/.test(cmdPom)) {
  1833. $("#cmdPomError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
  1834. isValid = false;
  1836. } if (
  1837. cmdPom === "1234567890" ||
  1838. cmdPom === "0123456789" ||
  1839. cmdPom === "9876543210" ||
  1840. cmdPom === "0987654321"
  1841. ) {
  1843. $("#cmdPomError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
  1844. isValid = false;
  1845. }
  1849. if (!cmpPVolSelect) {
  1850. $("#anyAreaError").text("தயவுசெய்து முந்தைய தன்னார்வலர்களின் விவரங்களைத் தேர்ந்தெடுக்கவும்.");
  1851. isValid = false;
  1852. }
  1854. var c1mobile = $.trim($("#cmdPom").val());
  1856. if(c1mobile !== "" && ephno !== "" && c1mobile === ephno){
  1857. Swal.fire({
  1858. title: "Warning!",
  1859. text: "கைபேசி எண்ணும் அவசரக்காலத் தொலைபேசி எண்ணும் ஒன்றாக இருக்கக்கூடாது",
  1860. icon: "warning",
  1861. confirmButtonText: "OK"
  1862. });
  1863. isValid = false;
  1864. }
  1866. if (i == 0) {
  1867. alert("விருப்பமான பகுதி விவரங்களைத் தேர்ந்தெடுக்கவும்.");
  1868. isValid = false;
  1869. }
  1870. /* if (isValid) {
  1871. saveCorporateDetails();
  1872. } */
  1873. if (isValid) {
  1874. $("#submitBtn").prop("disabled", true);
  1875. saveCorporateDetails();
  1876. return false;
  1877. }
  1878. else{
  1879. var firstError = $(".text-danger")
  1880. .filter(function () {
  1881. return $.trim($(this).text()) !== "";
  1882. })
  1883. .first();
  1884. if (firstError.length) {
  1886. var target = firstError
  1887. .closest(".mb-3")
  1888. .find("input, select, textarea")
  1889. .first();
  1891. if (target.length) {
  1893. $("html, body").animate({
  1894. scrollTop: target.offset().top - 120
  1895. }, 600);
  1897. // Focus the field
  1898. target.focus();
  1900. }else {
  1902. // Fallback to error message
  1903. $("html, body").animate({
  1904. scrollTop: firstError.offset().top - 120
  1905. }, 600);
  1906. }
  1907. }
  1908. }
  1909. return false;
  1910. }
  1912. else if (selectedTextcategory === "3") {
  1913. var cmpName = document.getElementById("ngoOrgName").value = document.getElementById("ngoOrgName").value.trim();
  1914. var ngoOrgEmail = document.getElementById("ngoOrgEmail").value = document.getElementById("ngoOrgEmail").value.trim();
  1915. var cmpLandline = document.getElementById("oLandline").value = document.getElementById("oLandline").value.trim();
  1916. var cmpMobile = document.getElementById("oMobile").value = document.getElementById("oMobile").value.trim();
  1917. var cmpAddress = document.getElementById("oAddress").value = document.getElementById("oAddress").value.trim();
  1918. var cmpPincode = document.getElementById("oPincode").value = document.getElementById("oPincode").value.trim();
  1919. var cmpNov = document.getElementById("oNvol").value = document.getElementById("oNvol").value.trim();
  1920. var cmpPoc = document.getElementById("oPoc").value = document.getElementById("oPoc").value.trim();
  1921. var cmdPom = document.getElementById("oPom").value = document.getElementById("oPom").value.trim();
  1922. var cmpPVolSelect = document.querySelector('input[name="oPvolY"]:checked');
  1923. var oPoE = document.getElementById("oPoE").value = document.getElementById("oPoE").value.trim();
  1924. var oPod = $("#oPod").val().trim();
  1926. if (cmpName == ""|| cmpName == undefined ) {
  1927. $("#ngoOrgNameError").text("தயவுசெய்து நிறுவனத்தின் பெயரை உள்ளிடவும்");
  1928. isValid = false;
  1929. }
  1930. if(ngoOrgEmail!=""){
  1931. if (!emailPattern.test(ngoOrgEmail)) {
  1932. $("#ngoOrgEmailError").text("சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
  1933. isValid = false;
  1934. }
  1935. }
  1936. if (cmpAddress == undefined || cmpAddress == "") {
  1937. $("#oAddressError").text("தயவுசெய்து நிறுவனத்தின் முகவரியை உள்ளிடவும்.");
  1938. isValid = false;
  1939. }
  1940. if (cmpPincode == undefined || cmpPincode == "") {
  1941. $("#oPincodeError").text("தயவுசெய்து அஞ்சல் குறியீட்டை உள்ளிடவும். ");
  1942. isValid = false;
  1943. }
  1944. if (cmpNov == undefined || cmpNov == "") {
  1945. $("#oNvolError").text("தயவுசெய்து தன்னார்வலர்களின் எண்ணிக்கையை உள்ளிடவும்.");
  1946. isValid = false;
  1947. }
  1948. if (!/^[1-9]\d*$/.test(cmpNov)) {
  1950. $("#oNvolError").text("சரியான எண்ணிக்கையிலான தன்னார்வலர்களை உள்ளிடவும்.");
  1951. isValid = false;
  1953. }
  1954. if (cmpPoc == undefined || cmpPoc == "") {
  1955. $("#oPocError").text("நடத்தைக்கான பொறுப்பாளர் பெயரை உள்ளிடவும்.");
  1956. isValid = false;
  1957. }
  1958. if (oPod == "") {
  1959. $("#oPodError").text("நடத்தைக்கான பொறுப்பாளர் பதவியைக் குறிப்பிடவும்");
  1960. isValid = false;
  1961. }
  1962. if (oPoE === "" || !emailPattern.test(oPoE)) {
  1963. $("#oPoeError").text("தொடர்பு கொள்ள வேண்டியவருக்கான சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.");
  1964. isValid = false;
  1965. }
  1966. if (cmdPom == undefined || cmdPom == "" || !mobilePattern.test(cmdPom)) {
  1967. $("#oPomError").text("தொடர்பு கொள்ள வேண்டியவரின் செல்லுபடியாகும் அலைபேசி எண்ணை உள்ளிடவும்.");
  1968. isValid = false;
  1969. }
  1971. if (!/^\d{10}$/.test(cmdPom)) {
  1973. $("#oPomError").text("தொலைபேசி எண்ணில் சரியாக 10 இலக்கங்கள் இருக்க வேண்டும்.");
  1974. isValid = false;
  1976. } if (!/^[6-9]/.test(cmdPom)) {
  1978. $("#oPomError").text("தொலைபேசி எண் 6, 7, 8 அல்லது 9-இல் தொடங்க வேண்டும்.");
  1979. isValid = false;
  1981. } if (/^(\d)\1{9}$/.test(cmdPom)) {
  1983. $("#oPomError").text("தொலைபேசி எண்ணில் ஒரே இலக்கம் மீண்டும் மீண்டும் வரக்கூடாது");
  1984. isValid = false;
  1986. } if (
  1987. cmdPom === "1234567890" ||
  1988. cmdPom === "0123456789" ||
  1989. cmdPom === "9876543210" ||
  1990. cmdPom === "0987654321"
  1991. ) {
  1993. $("#oPomError").text("சரியான தொலைபேசி எண்ணை உள்ளிடவும்");
  1994. isValid = false;
  1995. }
  1997. if (!cmpPVolSelect) {
  1998. $("#oPvolYError").text("தயவுசெய்து முந்தைய தன்னார்வலர்களின் விவரங்களைத் தேர்ந்தெடுக்கவும்.");
  1999. isValid = false;
  2000. }
  2002. var c2mobile = $.trim($("#oPom").val());
  2004. if(c2mobile !== "" && ephno !== "" && c2mobile === ephno){
  2005. Swal.fire({
  2006. title: "Warning!",
  2007. text: "கைபேசி எண்ணும் அவசரக்காலத் தொலைபேசி எண்ணும் ஒன்றாக இருக்கக்கூடாது",
  2008. icon: "warning",
  2009. confirmButtonText: "OK"
  2010. });
  2011. isValid = false;
  2012. }
  2014. if (i == 0) {
  2015. alert("விருப்பமான பகுதி விவரங்களைத் தேர்ந்தெடுக்கவும்.");
  2016. isValid = false;
  2017. }
  2018. if (isValid) {
  2019. $("#submitBtn").prop("disabled", true);
  2020. saveNGODetails();
  2021. return false;
  2022. }
  2023. else{
  2024. var firstError = $(".text-danger")
  2025. .filter(function () {
  2026. return $.trim($(this).text()) !== "";
  2027. })
  2028. .first();
  2029. if (firstError.length) {
  2031. var target = firstError
  2032. .closest(".mb-3")
  2033. .find("input, select, textarea")
  2034. .first();
  2036. if (target.length) {
  2038. $("html, body").animate({
  2039. scrollTop: target.offset().top - 120
  2040. }, 600);
  2042. // Focus the field
  2043. target.focus();
  2045. }else {
  2047. // Fallback to error message
  2048. $("html, body").animate({
  2049. scrollTop: firstError.offset().top - 120
  2050. }, 600);
  2051. }
  2052. }
  2053. }
  2054. return false;
  2055. }
  2057. return isValid; // Prevent default form submit in all cases
  2058. }
  2062. function saveTheIndividualForm() {
  2063. var preferredAreas = [];
  2064. $(".zone-checkbox:checked").each(function () {
  2065. preferredAreas.push($(this).val());
  2066. });
  2068. // Create JSON object with form data
  2069. var volunteerData = {
  2070. category:$("#category option:selected").data("category"),
  2071. subCategory: $("#subcategory option:selected").data("sub-category"),
  2072. name: $("#name").val(),
  2073. email: $("#email").val(),
  2074. dob: $("#dob").val(),
  2075. gender: $("input[name='gender']:checked").val(),
  2076. mobile_no: $("#mobile").val(),
  2077. //landline_no: $("#landline").val(),
  2078. district: $("#district").val(),
  2079. address: $("#address").val(),
  2080. pin_code: $("#pincode").val(),
  2081. //degree: $("#edu").val(),
  2082. //college_name: $("#college").val(),
  2083. //vol_nss: $("input[name='nss']:checked").val(),
  2084. //vol_ncc: $("input[name='ncc']:checked").val(),
  2085. //occupation: $("#occupation").val(),
  2086. //designation: $("#designation").val(),
  2087. //ngo_associated: $("#ngoAny").val(),
  2088. previous_volunteered: $("input[name='preVol']:checked").val(),
  2089. // Add more fields if needed
  2090. referBy: $("#ref").val(),
  2091. //aadhar: $("#aadhar").val(),
  2092. //bloodgroup: $("#bloodgroup").val(),
  2093. preferredAreas: preferredAreas,
  2094. expertise_area:$("#expertise").val(),
  2095. other_expertise:$("#other_expertise").val(),
  2096. ephno:$("#ephno").val(),
  2097. doc_type:$.trim($("#docs").val()),
  2098. doc_number:$.trim($("#doc_number").val()),
  2099. };
  2101. // Create FormData
  2102. var formData = new FormData();
  2104. // Add JSON data as Blob
  2105. formData.append(
  2106. "volunteer",
  2107. new Blob(
  2108. [JSON.stringify(volunteerData)],
  2109. { type: "application/json" }
  2110. )
  2111. );
  2113. // Add file
  2114. var docFile = $("#doc_url")[0].files[0];
  2116. if (docFile) {
  2117. formData.append("doc_url", docFile);
  2118. }
  2120. $('#loader').show();
  2122. // Send AJAX POST request
  2123. $.ajax({
  2124. type: "POST",
  2125. url: "/volunteer/api/register",
  2126. data: formData,
  2128. // IMPORTANT
  2129. processData: false,
  2130. contentType: false,
  2131. beforeSend: function() {
  2132. $("#pageLoader").show();
  2133. },
  2134. success: function (response) {
  2135. $('#loader').hide();
  2136. successPopup(response);
  2137. },
  2138. error: function (xhr) {
  2140. $('#loader').hide();
  2142. console.log("Error status:", xhr.status);
  2143. console.log("Error response:", xhr.responseText);
  2145. if (xhr.status === 409) {
  2147. var response = xhr.responseJSON;
  2149. Swal.fire({
  2150. title: "Warning!",
  2151. text: response && response.message
  2152. ? response.message
  2153. : "This mobile number is already registered",
  2154. icon: "warning",
  2155. confirmButtonText: "OK"
  2156. });
  2158. } else {
  2160. Swal.fire({
  2161. title: "Error!",
  2162. text: "Unable to save registration. Please try again.",
  2163. icon: "error",
  2164. confirmButtonText: "OK"
  2165. });
  2166. }
  2168. // Allow user to submit again
  2169. $("#submitBtn").prop("disabled", false);
  2170. },
  2171. complete: function () {
  2172. // Re-enable the submit button after completion (either success or error)
  2173. $("#pageLoader").hide();
  2174. }
  2175. });
  2176. return false;
  2177. }
  2179. function saveCorporateDetails() {
  2180. var preferredAreas = [];
  2181. $(".zone-checkbox:checked").each(function () {
  2182. preferredAreas.push($(this).val());
  2183. });
  2184. var copInfo = {
  2185. category:$("#category option:selected").data("category"),
  2186. subCategory: $("#subcategory option:selected").data("sub-category"),
  2187. compName: $("#cmpName").val(),
  2188. compEmail: $("#cmpEmail").val(),
  2189. landline: $("#cmpLandline").val(),
  2190. mobileNo: $("#cmpMobile").val(),
  2191. district: $("#cmpDistrict").val(),
  2192. address: $("#cmpAddress").val(),
  2193. pinCode: $("#cmpPincode").val(),
  2194. no_of_vol: $("#cmpNov").val(),
  2195. contactPerson: $("#cmpPoc").val(),
  2196. contactPerMobile: $("#cmdPom").val(),
  2197. cntPerEmail: $("#cmdPoE").val(),
  2198. cntPerDesign: $("#cmdPod").val(),
  2199. previous_volunteered: $("input[name='cmpPVol']:checked").val(),
  2200. referBy: $("#ref").val(),
  2201. preferredAreas: preferredAreas,
  2202. expertise_area:$("#expertise").val(),
  2203. other_expertise:$("#other_expertise").val(),
  2204. ephno:$("#ephno").val(),
  2205. }
  2206. $('#loader').show();
  2207. $.ajax({
  2208. type: "POST",
  2209. url: "/volunteer/api/registerAsCorporate",
  2210. contentType: "application/json",
  2211. data: JSON.stringify(copInfo),
  2212. beforeSend: function() {
  2213. $("#pageLoader").show();
  2214. },
  2215. success: function (response) {
  2216. $('#loader').hide();
  2217. successPopup(response);
  2218. },
  2219. error: function (xhr) {
  2221. $('#loader').hide();
  2223. console.log("Error status:", xhr.status);
  2224. console.log("Error response:", xhr.responseText);
  2226. if (xhr.status === 409) {
  2228. var response = xhr.responseJSON;
  2230. Swal.fire({
  2231. title: "Warning!",
  2232. text: response && response.message
  2233. ? response.message
  2234. : "This mobile number is already registered",
  2235. icon: "warning",
  2236. confirmButtonText: "OK"
  2237. });
  2239. } else {
  2241. Swal.fire({
  2242. title: "Error!",
  2243. text: "Unable to save registration. Please try again.",
  2244. icon: "error",
  2245. confirmButtonText: "OK"
  2246. });
  2247. }
  2249. // Allow user to submit again
  2250. $("#submitBtn").prop("disabled", false);
  2251. },
  2252. complete: function () {
  2253. // Re-enable the submit button after completion (either success or error)
  2254. $("#pageLoader").hide();
  2255. },
  2257. });
  2258. return false;
  2260. }
  2263. function saveNGODetails() {
  2264. var preferredAreas = [];
  2265. $(".zone-checkbox:checked").each(function () {
  2266. preferredAreas.push($(this).val());
  2267. });
  2268. var ngoInfo = {
  2269. category:$("#category option:selected").data("category"),
  2270. subCategory: $("#subcategory option:selected").data("sub-category"),
  2271. orgName: $("#ngoOrgName").val(),
  2272. orgEmail: $("#ngoOrgEmail").val(),
  2273. /* landline: $("#oLandline").val(),
  2274. mobileNo: $("#oMobile").val(), */
  2275. district: $("#oDistrict").val(),
  2276. address: $("#oAddress").val(),
  2277. pinCode: $("#oPincode").val(),
  2278. no_of_vol: $("#oNvol").val(),
  2279. contactPerson: $("#oPoc").val(),
  2280. mobileNo: $("#oPom").val(),
  2281. cntPerEmail: $("#oPoE").val(),
  2282. cntPerDesign: $("#oPod").val(),
  2283. previous_volunteered: $("input[name='oPvolY']:checked").val(),
  2284. referBy: $("#ref").val(),
  2285. preferredAreas: preferredAreas,
  2286. expertise_area:$("#expertise").val(),
  2287. other_expertise:$("#other_expertise").val(),
  2288. ephno:$("#ephno").val(),
  2289. }
  2290. $('#loader').show();
  2292. $.ajax({
  2293. type: "POST",
  2294. url: "/volunteer/api/registerAsNgo",
  2295. contentType: "application/json",
  2296. data: JSON.stringify(ngoInfo),
  2297. beforeSend: function() {
  2298. $("#pageLoader").show();
  2299. },
  2300. success: function (response) {
  2301. $('#loader').hide();
  2302. successPopup(response);
  2303. },
  2305. complete: function () {
  2306. // Re-enable the submit button after completion (either success or error)
  2307. $("#pageLoader").hide();
  2308. },
  2309. });
  2310. return false;
  2313. }
  2316. function successPopup(id) {
  2317. $("#submitBtn").prop("disabled", true);
  2319. Swal.fire({
  2320. title: "Good job!",
  2321. 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",
  2322. icon: "success",
  2323. allowOutsideClick: false,
  2324. allowEscapeKey: false,
  2325. allowEnterKey: false
  2326. }).then((result) => {
  2327. if (result.isConfirmed) {
  2328. window.location.href = "https://chennaicorporation.gov.in/gcc/"; // Redirect to the desired URL
  2329. }
  2330. });
  2331. }
  2333. //script for otp
  2334. $(document).ready(function () {
  2335. // Event listener for Send OTP button
  2336. $('#sendOtpButton').click(function (event) {
  2337. event.preventDefault();
  2338. // Get the entered mobile number
  2339. const mobileNumber = $('#mobile').val();
  2341. // Basic check to ensure mobile number is entered
  2342. if (mobileNumber.length === 10) {
  2343. // Display the mobile number in the OTP modal
  2344. $("#mobilenotxt").html(mobileNumber);
  2346. $.ajax({
  2347. type: "GET",
  2348. url: '/volunteer/api/registration/sendOTP',
  2349. data: {'mobile': mobileNumber, 'purpose': 'New User'}, // Pass mobile number and purpose
  2350. dataType: 'json',
  2351. success: function (response) {
  2352. if (response === "Error: This number is not registered.") {
  2353. // Show an alert if the number is not registered
  2354. alert("This number is not registered.");
  2355. } else if (response !== "Error") {
  2356. // Bootstrap 4 Modal Handling
  2357. $('#otpForm').modal('show');
  2359. // On successful OTP send, enable the verified button and update its state
  2360. //$('#verifiedOTP').prop('disabled', false).css('display', 'block');
  2362. // Start countdown for resend OTP
  2363. var timeleft = 60;
  2364. var resendTimeout;
  2365. var countdown = $("#countdown");
  2367. // Display countdown
  2368. $("#resendlink").html('Please wait.. <span id="countdown">60</span>s');
  2370. resendTimeout = setInterval(function () {
  2371. timeleft--;
  2372. countdown.text(timeleft);
  2374. // When countdown finishes, enable Resend OTP link
  2375. if (timeleft <= 0) {
  2376. clearInterval(resendTimeout);
  2377. $("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP();">Resend OTP</a>');
  2378. }
  2379. }, 1000);
  2380. } else {
  2381. alert("OTP not sent. Please try again.");
  2382. }
  2383. },
  2384. error: function () {
  2385. alert("This number is not registered.");
  2386. }
  2387. });
  2388. } else {
  2389. alert("Please enter a valid 10-digit mobile number.");
  2390. }
  2391. });
  2392. });
  2394. // For OTP input box
  2395. $('.otp-input').on('keyup', function (e) {
  2396. var $this = $(this);
  2397. if ($this.val().length === 1) {
  2398. $this.next('.otp-input').focus();
  2399. }
  2400. if ($this.val().length === 0) {
  2401. $this.prev('.otp-input').focus();
  2402. }
  2403. });
  2405. // Verify OTP function
  2406. function verifyOtp() {
  2407. var otpInputs = $('.otp-input');
  2408. var otpValue = '';
  2410. otpInputs.each(function () {
  2411. otpValue += $(this).val();
  2412. });
  2414. $.ajax({
  2415. type: "GET",
  2416. url: '/volunteer/api/registration/verifyOTP',
  2417. data: {'otp': otpValue},
  2418. dataType: 'text',
  2419. success: function (bodyMessage) {
  2420. if (bodyMessage.trim() === "Success") {
  2421. // SweetAlert for success
  2422. Swal.fire({
  2423. title: "OTP Verified!",
  2424. text: "Your OTP has been successfully verified.",
  2425. icon: "success",
  2426. confirmButtonText: "OK"
  2427. }).then(() => {
  2428. $('#otpForm').modal('hide'); // Hide the OTP modal
  2429. $('#sendOtpButton').prop('disabled', true).css('display', 'none');
  2430. $('#verifiedOTP').prop('disabled', false).css('display', 'block');
  2431. });
  2432. } else {
  2433. // SweetAlert for failure
  2434. Swal.fire({
  2435. title: "OTP Incorrect",
  2436. text: "The OTP you entered is incorrect. Please try again.",
  2437. icon: "error",
  2438. confirmButtonText: "Retry"
  2439. });
  2440. }
  2441. },
  2442. error: function () {
  2443. // SweetAlert for server error
  2444. Swal.fire({
  2445. title: "Error",
  2446. text: "There was an issue verifying your OTP. Please try again later.",
  2447. icon: "error",
  2448. confirmButtonText: "OK"
  2449. });
  2450. }
  2451. });
  2453. return false; // Prevent form submission
  2454. }
  2455. //to set dob
  2456. function setMaxDate() {
  2457. const today = new Date();
  2458. const formattedDate = today.toISOString().split('T')[0]; // Format date as YYYY-MM-DD
  2459. document.getElementById('dob').setAttribute('max', formattedDate);
  2460. }
  2462. function validateAge() {
  2463. const dobInput = document.getElementById('dob');
  2464. const dobError = document.getElementById('dobError');
  2465. const dobValue = new Date(dobInput.value);
  2466. const today = new Date();
  2468. // Calculate the age
  2469. const age = today.getFullYear() - dobValue.getFullYear();
  2470. const monthDifference = today.getMonth() - dobValue.getMonth();
  2472. // Adjust age if the birthday hasn't occurred yet this year
  2473. if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < dobValue.getDate())) {
  2474. age--;
  2475. }
  2477. if (age < 18) {
  2478. alert("You must be at least 18 years old."); // Popup alert
  2479. dobInput.value = ''; // Clear the input if age is under 18
  2480. } else {
  2481. dobError.textContent = ""; // Clear error message
  2482. }
  2483. }
  2485. // Call setMaxDate when the page loads
  2486. window.onload = setMaxDate;
  2487. //script for submit
  2488. //to validate aadhar
  2489. function validateAadhar() {
  2490. const aadharInput = document.getElementById('aadhar');
  2491. const aadharError = document.getElementById('aadharError');
  2492. const aadharValue = aadharInput.value;
  2494. // Check if the input length is 12
  2495. if (aadharValue.length === 12) {
  2496. aadharError.textContent = ''; // Clear the error
  2497. } else {
  2498. aadharError.textContent = 'Aadhar number must be exactly 12 digits.';
  2499. }
  2500. }
  2506. </script>
  2507. </body>
  2509. </html>