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.
436 lines
13 KiB
436 lines
13 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="viewport" content="initial-scale=1">
|
|
<title>Welcome to Greater Chennai Corporation</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<style>
|
|
body {
|
|
background-image: url("bg.jpg");
|
|
height: 500px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
/* Resize the background image to cover the entire container */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body background="desktop/RiponBuilding.jpg;">
|
|
<form action="data.jsp" class="form" method="post">
|
|
<h2 class="heading">Property Tax Appointment</h2>
|
|
<h4 class="heading">Senior Citizen Request</h4>
|
|
<div class="box">
|
|
<div class="firstbox">
|
|
<div>
|
|
<h3><label for="exampleInputPassword1"><span id="onlinepayment-sub">
|
|
Search By
|
|
<input type="radio" id="isNew" name="isNew" value='N' checked onClick="setIsExistingSelected(1)" style="font-size: 10.5px;">
|
|
Existing Bill Number
|
|
<input name="isNew" type="radio" id="isNew" value='Y' onClick="setIsExistingSelected(0)" style="font-size: 10.5px;">
|
|
General Revision New Bill Number </span></label></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="firstbox">
|
|
<div class="inputcontainer">
|
|
<label class="label" for="zone"> Zone </label>
|
|
<select class="blockinput" name="zone" id="zone" onchange="getDivision()">
|
|
<option value="0">Select Zone</option>
|
|
<option value="01">01</option>
|
|
<option value="02">02</option>
|
|
<option value="03">03</option>
|
|
<option value="04">04</option>
|
|
<option value="05">05</option>
|
|
<option value="06">06</option>
|
|
<option value="07">07</option>
|
|
<option value="08">08</option>
|
|
<option value="09">09</option>
|
|
<option value="10">10</option>
|
|
<option value="11">11</option>
|
|
<option value="12">12</option>
|
|
<option value="13">13</option>
|
|
<option value="14">14</option>
|
|
<option value="15">15</option>
|
|
</select>
|
|
</div>
|
|
<div class="inputcontainer">
|
|
<label class="label" for="division"> Division </label>
|
|
<select class="blockinput" name="division" id="division">
|
|
<option value="0">Select Division</option>
|
|
</select>
|
|
</div>
|
|
<div class="inputcontainer">
|
|
<label class="label" for="billno"> Bill No </label>
|
|
<input
|
|
class="blockinput"
|
|
id="billno"
|
|
type="text" name="billno"
|
|
/>
|
|
</div>
|
|
<div class="inputcontainer div_sub_no">
|
|
<label class="label" for="subno"> Sub No </label>
|
|
<input
|
|
class="blockinput"
|
|
id="subno"
|
|
type="text" name="subno"
|
|
placeholder="000"
|
|
readonly
|
|
/>
|
|
</div><br>
|
|
</div>
|
|
<button type="submit" class="button">Submit</button>
|
|
</div>
|
|
</form>
|
|
|
|
<h2 class="heading ">Details</h2>
|
|
|
|
<div class="box form">
|
|
<span id="status" style="color: red" style="font-weight:bold"></span>
|
|
<div class="secondbox">
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="assessname" > Assessee Name </label>
|
|
<input
|
|
class="input"
|
|
id="assessname"
|
|
type="text"
|
|
disabled
|
|
placeholder="Name"
|
|
style="font-weight:bold"/>
|
|
</div>
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="address" > Address </label>
|
|
<textarea
|
|
class="input"
|
|
id="address"
|
|
disabled
|
|
placeholder="Address"
|
|
style="font-weight:bold"></textarea>
|
|
</div>
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="presenttax" > Present Tax </label>
|
|
<input
|
|
class="input"
|
|
id="presenttax"
|
|
type="text"
|
|
disabled
|
|
placeholder="Present Tax"
|
|
style="font-weight:bold"
|
|
/>
|
|
</div>
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="due"> Due </label>
|
|
<input
|
|
class="input"
|
|
id="due"
|
|
type="text"
|
|
disabled
|
|
placeholder="Due"
|
|
style="font-weight:bold"
|
|
/>
|
|
</div>
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="mobileno" > Mobile Number </label>
|
|
<input
|
|
class="input"
|
|
id="mobileno"
|
|
type="number"
|
|
disabled
|
|
placeholder="Mobile Number"
|
|
style="font-weight:bold"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form id="form_appointment" class="">
|
|
<h2 class="heading ">Appointment Booking Details</h2>
|
|
<div class="box form">
|
|
<div class="secondbox">
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="propertyid" > Property ID </label>
|
|
<input
|
|
class="input"
|
|
id="propertyid"
|
|
disabled
|
|
placeholder="00-000-00000-000"
|
|
type="text" name="propertyid"
|
|
maxlength="16"
|
|
style="font-weight:bold"
|
|
/>
|
|
</div>
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="contactaddress"> Contact Address </label>
|
|
<textarea
|
|
class="input"
|
|
id="contactaddress"
|
|
onclick="validateContAddr()"
|
|
placeholder="Enter Contact Address"
|
|
></textarea>
|
|
</div>
|
|
<div class="inputcontainer2">
|
|
<label class="label2" for="mobno"> Contact Number </label>
|
|
<input
|
|
class="inputnum"
|
|
id="mobno"
|
|
type="number"
|
|
pattern="\d*"
|
|
maxlength="10"
|
|
placeholder="Enter Contact Number"
|
|
/>
|
|
<button type="button" class="button" id="btn_send_otp" onclick="sendOtp()">OTP</button>
|
|
</div>
|
|
<div class="inputcontainer2" id="otp">
|
|
<label class="label2" for="mobno"> </label>
|
|
<input class="inputnum" id="otpvalue" type="text" pattern="\d*" maxlength="6" placeholder="Enter OTP"/>
|
|
<button class="button" type="button" onClick="verifyOtp()" id="btn_verify_otp">Verify</button>
|
|
</div> </div>
|
|
<div class="thirdbox">
|
|
<div class="inputcontainer3">
|
|
<label class="label" for="age"> Age </label>
|
|
<input class="blockinput" id="age" type="text" placeholder="Age" disabled/>
|
|
</div>
|
|
<div class="inputcontainer3">
|
|
<label class="label" for="appdate"> Appointment Date </label>
|
|
<input class="blockinput date_picker" id="appdate" type="date" placeholder="" onkeydown="return false" disabled />
|
|
</div>
|
|
<div class="inputcontainer3">
|
|
<label class="label" for="apptime"> Appointment Time </label>
|
|
<input class="blockinput" id="apptime" type="time" placeholder="" min="6:00" max="20:00" disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttonbox">
|
|
<button type="button" class="button" id="save" onClick="insertData()">Save</button>
|
|
<button type="reset" class="button" id="clear">Clear</button>
|
|
</div>
|
|
</form>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
|
<script>
|
|
|
|
var boolIsExistingSelected = 1;
|
|
$(document).ready(function(){
|
|
var today = new Date().toISOString().split('T')[0];
|
|
document.getElementsByClassName('date_picker')[0].setAttribute('min', today);
|
|
});
|
|
|
|
function setIsExistingSelected( val ) {
|
|
boolIsExistingSelected = val;
|
|
|
|
if(false == val){
|
|
$('#subno').val('000');
|
|
$('#subno').attr('disabled', 'disabled');
|
|
$('.div_sub_no').hide();
|
|
|
|
}else {
|
|
$('#subno').attr('disabled', false);
|
|
$('.div_sub_no').show();
|
|
}
|
|
}
|
|
|
|
|
|
$('.form').submit(function(e){
|
|
$('#assessname').val('');
|
|
$('#address').val('');
|
|
$('#presenttax').val('');
|
|
$('#due').val('');
|
|
$('#mobileno').val('');
|
|
$('#propertyid').val('');
|
|
e.preventDefault();
|
|
var zone = $('#zone').val();
|
|
var division = $('#division').val();
|
|
var subno = $('#subno').val();
|
|
|
|
if(subno == '' ){
|
|
subno = '000';
|
|
}
|
|
|
|
/*if(parseInt( division ) < 10){
|
|
division = '00'+division;
|
|
}
|
|
if(parseInt( division ) < 100){
|
|
division = '0'+division;
|
|
console.log('d: ' + division);
|
|
}*/
|
|
|
|
|
|
|
|
var billno = $('#billno').val();
|
|
var url = 'data.jsp?zone='+zone+'&division='+division+'&billno='+billno+'&subno='+subno+'&isExistingSelected='+boolIsExistingSelected;
|
|
|
|
|
|
$('#status').html('<p>Searching data..</p>');
|
|
|
|
$.ajax({
|
|
url: url,
|
|
data: {},
|
|
complete: function(xhr, statusText){
|
|
if(xhr.status == 200 && xhr.responseText != '' && xhr.responseText != null){
|
|
console.log('l: ' + xhr.responseText.trim().length);
|
|
if(xhr.responseText.trim().length == 0) {
|
|
$('#status').html('<p>No data found.</p>');
|
|
return;
|
|
}
|
|
$('#status').html('');
|
|
var json = $.parseJSON(xhr.responseText);
|
|
|
|
console.log(json.length);
|
|
$('#assessname').val(json[0].OWNERSNAME);
|
|
$('#address').val(json[0].ADDRESS);
|
|
$('#presenttax').val(json[0].AGGREGATE_CURRENT_DEMAND);
|
|
$('#due').val(json[0].DUE);
|
|
$('#mobileno').val(json[0].MOBILENO);
|
|
$('#propertyid').val(json[0].UPICNO);
|
|
}
|
|
},
|
|
error: function(xhr, statusText, err){
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#form_appointment').submit(function(e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
|
|
function getDivision() {
|
|
var zone = $('#zone').val();
|
|
var url = 'getDivision.jsp?zone='+zone;
|
|
$.ajax({
|
|
url: url,
|
|
data: {},
|
|
complete: function(xhr, statusText){
|
|
if(xhr.status == 200 && xhr.responseText != '' && xhr.responseText != null){
|
|
var arrObjDivisions = $.parseJSON(xhr.responseText);
|
|
var options = '';
|
|
$(arrObjDivisions).each(function(){
|
|
if(this.DIVISION != null){
|
|
options += '<option value="'+this.DIVISION+'">'+this.DIVISION+'</option>';
|
|
}
|
|
|
|
});
|
|
$('#division').html(options);
|
|
}
|
|
},
|
|
error: function(xhr, statusText, err){
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function validateContactNumber() {
|
|
var contact_number = $('#mobno').val();
|
|
|
|
if(contact_number.length != 10){
|
|
alert('Please enter 10 digit mobile number.');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function sendOtp() {
|
|
|
|
// validating property id
|
|
var property_id = $('#propertyid').val();
|
|
|
|
if(property_id == '') {
|
|
alert('Invalid property id.');
|
|
return;
|
|
}
|
|
|
|
// validating contact number
|
|
if( false == validateContactNumber() ) {
|
|
return false;
|
|
}
|
|
|
|
var contact_number = $('#mobno').val();
|
|
|
|
// sending OTP
|
|
$.post('send_otp.jsp?mobno='+contact_number,function(response) {
|
|
alert(response);
|
|
document.getElementById('otp').style.display="flex";
|
|
$('#otpvalue').focus();
|
|
$('#btn_send_otp').attr('disabled','disabled');
|
|
});
|
|
|
|
}
|
|
|
|
function verifyOtp() {
|
|
var entered_otp = $('#otpvalue').val();
|
|
|
|
if(entered_otp == '' || entered_otp.legth == 0) {
|
|
alert('Please enter OTP.');
|
|
return;
|
|
}
|
|
|
|
$.post('otp_verification.jsp?entered_otp='+entered_otp,function(response){
|
|
|
|
if(response == 'success') {
|
|
$('#age').attr('disabled',false);
|
|
$('#appdate').attr('disabled',false);
|
|
$('#apptime').attr('disabled',false);
|
|
$('#save').attr('disabled',false);
|
|
$('#clear').attr('disabled',false);
|
|
$('#btn_verify_otp').attr('disabled','disabled');
|
|
}else{
|
|
alert(response);
|
|
}
|
|
});
|
|
}
|
|
|
|
function insertData() {
|
|
|
|
// age validation
|
|
var property_id = $('#propertyid').val();
|
|
var contact_address = $('#contactaddress').val();
|
|
var mobile_number = $('#mobno').val();
|
|
var age = $('#age').val();
|
|
var app_date = $('#appdate').val();
|
|
var app_time = $('#apptime').val();
|
|
|
|
if( contact_address == '' || contact_address.length == 0 ){
|
|
alert('Please enter contact address');
|
|
return;
|
|
}
|
|
|
|
if(age < 60) {
|
|
alert('Age should be 60 or greater than 60.');
|
|
return;
|
|
}
|
|
|
|
if(app_date == '' || app_date.length == 0){
|
|
alert('Please select date.');
|
|
return;
|
|
}
|
|
|
|
if( app_time == '' || app_time.length == 0 ){
|
|
alert('Please choose time.');
|
|
return;
|
|
}
|
|
|
|
var array_time = app_time.split(':');
|
|
if(array_time[0] < 6 || array_time[0] > 20) {
|
|
alert('Please select time between 6:00 to 20:00');
|
|
return;
|
|
}
|
|
|
|
$.post('save.jsp',{
|
|
'age': age,
|
|
'app_date': app_date,
|
|
'app_time': app_time,
|
|
'property_id': property_id,
|
|
'contact_address': contact_address,
|
|
'mobile_number' : mobile_number
|
|
},function(response){
|
|
alert(response);
|
|
window.location.reload();
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|