|
|
@ -0,0 +1,327 @@ |
|
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
|
<html xmlns:th="http://www.thymeleaf.org"> |
|
|
|
|
|
|
|
|
|
|
|
<head> |
|
|
|
|
|
<meta charset="UTF-8"> |
|
|
|
|
|
<title>GCC - Volunteers</title> |
|
|
|
|
|
<!-- Bootstrap CSS --> |
|
|
|
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> |
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
|
|
|
|
|
<!-- SweetAlert CSS --> |
|
|
|
|
|
<!-- |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> |
|
|
|
|
|
--> |
|
|
|
|
|
<!-- Bootstrap JS --> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> |
|
|
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> |
|
|
|
|
|
<!-- SweetAlert JS --> |
|
|
|
|
|
<!-- |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> |
|
|
|
|
|
--> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
/*for radio button style*/ |
|
|
|
|
|
.radio-group { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
/* Ensures all items are aligned to the center */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio-item { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
/* Adds space between each radio item */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio-item input[type="radio"] { |
|
|
|
|
|
margin-right: 10px; |
|
|
|
|
|
/* Adds space between the radio button and its label */ |
|
|
|
|
|
vertical-align: middle; |
|
|
|
|
|
/* Ensures vertical alignment */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.radio-item label { |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
/* Removes any default margins that might affect alignment */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*for radio button style*/ |
|
|
|
|
|
/*checkbox style*/ |
|
|
|
|
|
.zone-checkbox-label { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
padding: 10px 15px; |
|
|
|
|
|
border: 1px solid #ccc; |
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
|
background-color: #f8f9fa; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.zone-checkbox { |
|
|
|
|
|
margin-right: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.form-check { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.form-check-input { |
|
|
|
|
|
transform: scale(1.5); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/*checkbox style*/ |
|
|
|
|
|
label { |
|
|
|
|
|
color: #858585; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Header Styling */ |
|
|
|
|
|
.header { |
|
|
|
|
|
background-color: #1d495a; |
|
|
|
|
|
padding: 10px 20px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
color: white; |
|
|
|
|
|
font-family: Arial, sans-serif; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header .logo { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header .logo img { |
|
|
|
|
|
height: 60px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header .menu { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header .menu a { |
|
|
|
|
|
color: white; |
|
|
|
|
|
margin: 0 15px; |
|
|
|
|
|
text-decoration: none; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.header .menu a:hover { |
|
|
|
|
|
text-decoration: underline; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.required{ |
|
|
|
|
|
color:red; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
|
<body style="background-color: #ebf1fa;"> |
|
|
|
|
|
<h1 style="display: none;">GCC Volunteers</h1> |
|
|
|
|
|
<h1 style="display: none;">GCC Volunteers Registration</h1> |
|
|
|
|
|
<h1 style="display: none;">Chennai Volunteers </h1> |
|
|
|
|
|
<h1 style="display: none;">Volunteers </h1> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Header Section --> |
|
|
|
|
|
<div class="header"> |
|
|
|
|
|
<!-- Left Logo --> |
|
|
|
|
|
<div class="logo"> |
|
|
|
|
|
<img src="https://gccservices.in/gcc/assets/images/logo.png" alt="Greater Chennai Corporation Logo"> |
|
|
|
|
|
<span class="ml-2">GREATER CHENNAI CORPORATION</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Center Menu --> |
|
|
|
|
|
<div class="menu"> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/">Home</a> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/about-GCC/">About GCC</a> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/who-is-who/index_data.jsp">Who'sWho</a> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/council/about-council/">Council</a> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/tender/">Tender</a> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/department/">Departments</a> |
|
|
|
|
|
<a href="https://chennaicorporation.gov.in/gcc/online-services/">Online Services</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="container mt-5"> |
|
|
|
|
|
|
|
|
|
|
|
<form onsubmit="return validateForm();"> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Dropdowns for selecting category and subcategory --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap Card for displaying uploaded details --> |
|
|
|
|
|
<div class="card" style="background-color: white;"> |
|
|
|
|
|
<div class="card-header text-center" style="color: #1d4859;"> |
|
|
|
|
|
<h3>C&D Waste Collectors Registration Form</h3> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="card-body"> |
|
|
|
|
|
<!--form--> |
|
|
|
|
|
|
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12"> |
|
|
|
|
|
<div class="card" style="margin-top: 0px;"> |
|
|
|
|
|
<!--<div class="card-header justify-content-between align-items-center"> |
|
|
|
|
|
<h3><b>Registration Form</b></h3> |
|
|
|
|
|
</div>--> |
|
|
|
|
|
<div class="card-body"> |
|
|
|
|
|
<form id="cdwasteRegistrationForm"> |
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
<div class="col-sm-12 col-md-6"> |
|
|
|
|
|
<label for="name">Name<span class="required">*</span></label> |
|
|
|
|
|
<input type="text" class="form-control" id="name" |
|
|
|
|
|
placeholder="Enter Name" required> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="col-sm-12 col-md-6"> |
|
|
|
|
|
<label for="mobileNo">Mobile No<span |
|
|
|
|
|
class="required">*</span></label> |
|
|
|
|
|
<input type="number" class="form-control" id="mobileNo" |
|
|
|
|
|
placeholder="Mobile No" required> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
|
<label for="address">Address<span class="required">*</span></label> |
|
|
|
|
|
<textarea class="form-control" id="address" rows="2" required></textarea> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
|
<label for="adhaar">Upload Aadhaar:<span class="required">*</span></label> |
|
|
|
|
|
<input type="file" class="form-control" id="adhaarFile" required> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
|
|
<label for="vehicleRcBook">Upload Vehicle RC Book:<span |
|
|
|
|
|
class="required">*</span></label> |
|
|
|
|
|
<input type="file" class="form-control" id="vehicleRcBookFile" required> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group text-center"> |
|
|
|
|
|
<button type="submit" class="btn btn-primary" |
|
|
|
|
|
id="registerSubmit">Submit</button> |
|
|
|
|
|
<button type="reset" class="btn btn-secondary ml-2" |
|
|
|
|
|
onclick="resetForm()">Reset</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</form> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--form--> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</form> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
$(document).ready(function () { |
|
|
|
|
|
$('#registerSubmit').on('click', function (event) { |
|
|
|
|
|
event.preventDefault(); // Prevent form from submitting the traditional way |
|
|
|
|
|
|
|
|
|
|
|
var name = $('#name').val(); |
|
|
|
|
|
var mobileNo = $('#mobileNo').val(); |
|
|
|
|
|
var address = $('#address').val(); |
|
|
|
|
|
var adhaarFile = $('#adhaarFile')[0].files[0]; |
|
|
|
|
|
var vehicleRcBookFile = $('#vehicleRcBookFile')[0].files[0]; |
|
|
|
|
|
|
|
|
|
|
|
if (!name || !mobileNo || !address || !adhaarFile || !vehicleRcBookFile) { |
|
|
|
|
|
|
|
|
|
|
|
Swal.fire({ |
|
|
|
|
|
|
|
|
|
|
|
icon: 'error', |
|
|
|
|
|
|
|
|
|
|
|
title: 'Error', |
|
|
|
|
|
|
|
|
|
|
|
text: 'Please fill in all fields and upload a file before submitting.', |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return; // Stop form submission if any field is empty |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Create a FormData object to hold the form data, including files |
|
|
|
|
|
var formData = new FormData(); |
|
|
|
|
|
formData.append('name', name); |
|
|
|
|
|
formData.append('mobileNo', mobileNo); |
|
|
|
|
|
formData.append('address', address); |
|
|
|
|
|
|
|
|
|
|
|
formData.append('adhaar', adhaarFile); // Add Aadhaar file |
|
|
|
|
|
formData.append('vehicleRcBook', vehicleRcBookFile); // Add Vehicle RC Book file |
|
|
|
|
|
|
|
|
|
|
|
// Make an AJAX request to submit the form data |
|
|
|
|
|
$.ajax({ |
|
|
|
|
|
url: '/gcc/api/registration/register', // Your API endpoint for registration |
|
|
|
|
|
type: 'POST', |
|
|
|
|
|
data: formData, |
|
|
|
|
|
processData: false, // Required for FormData |
|
|
|
|
|
contentType: false, // Required for FormData |
|
|
|
|
|
success: function (response) { |
|
|
|
|
|
if (response[0].status === 'success') { |
|
|
|
|
|
Swal.fire({ |
|
|
|
|
|
icon: 'success', |
|
|
|
|
|
title: 'Success', |
|
|
|
|
|
text: response[0].message |
|
|
|
|
|
}).then((result) => { |
|
|
|
|
|
|
|
|
|
|
|
if (result.isConfirmed) { |
|
|
|
|
|
// Optionally reset the form |
|
|
|
|
|
|
|
|
|
|
|
window.location.reload(true); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} else { |
|
|
|
|
|
Swal.fire({ |
|
|
|
|
|
icon: 'error', |
|
|
|
|
|
title: 'Error', |
|
|
|
|
|
text: response[0].message |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
error: function (xhr, status, error) { |
|
|
|
|
|
Swal.fire({ |
|
|
|
|
|
icon: 'error', |
|
|
|
|
|
title: 'Error', |
|
|
|
|
|
text: 'An error occurred: ' + error |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
|
|
|
</html> |