462 lines
24 KiB
PHP
462 lines
24 KiB
PHP
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title"><?= $page_name; ?></h4>
|
|
<div class="form-group text-right m-b-0">
|
|
<button class="btn btn-primary"style="margin-top:-60px;" id="editButton">Edit</button>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Customer details form fields -->
|
|
<form class="parsley-examples" novalidate method="POST" enctype="multipart/form-data" action="<?= base_url() . "insert_donor"; ?>" id="myForm" name="myForm">
|
|
<!-- <img src="<?= base_url() . "public/assets/images/plugins/loading.gif" ?>" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg"> -->
|
|
|
|
<div class="form-row">
|
|
<div class="form-group col-md-4">
|
|
<label for="DonorType" class="col-form-label">Contributor Type<span class="text-danger"> *</span></label>
|
|
<select class="form-control" id="DonorType" name="DonorType" required disabled>
|
|
<option value="" disabled>--Select--</option>
|
|
<option value="individual" <?= isset($customer['donor_type']) && $customer['donor_type'] === 'individual' ? 'selected' : '' ?>>Individual</option>
|
|
<option value="organization" <?= isset($customer['donor_type']) && $customer['donor_type'] === 'organization' ? 'selected' : '' ?>>Organization</option>
|
|
|
|
</select>
|
|
<div class="invalid-feedback">Please provide.</div>
|
|
</div>
|
|
|
|
<div class="form-group col-md-4" id="org_reg">
|
|
<label for="csname" class="col-form-label">Organization Name<span class="text-danger"> *</span></label>
|
|
<input type="text" class="form-control" id="org_name_field" name="org_name" value="<?= isset($customer['org_name']) ? $customer['org_name'] : '' ?>" placeholder="Organization Name" disabled/>
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
|
|
<div class="form-group col-md-4" id="org_name">
|
|
<label for="csname" class="col-form-label">Organization Reg Details<span class="text-danger"> *</span></label>
|
|
<input type="text" class="form-control" id="org_reg_details" name="org_reg_Details" value="<?= isset($customer['org_reg_details']) ? $customer['org_reg_details'] : '' ?>" placeholder="Organization Reg details"disabled/>
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group col-md-4">
|
|
<label for="cfname" class="col-form-label"><span class="contactPerson">Contact Person </span>First Name<span class="text-danger"> *</span></label>
|
|
<input type="text" class="form-control" id="cfname" name="cfname" value="<?= isset($customer['first_name']) ? $customer['first_name'] : '' ?>" placeholder="First Name" required disabled/>
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
<div class="form-group col-md-4">
|
|
<label for="csname" class="col-form-label"><span class="contactPerson">Contact Person </span>Last Name<span class="text-danger"> *</span></label>
|
|
<input type="text" class="form-control" name="csname" value="<?= isset($customer['last_name']) ? $customer['last_name'] : '' ?>" placeholder="Last Name" required disabled />
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
|
|
<div class="form-group col-md-4">
|
|
<label for="cmobile" class="col-form-label"><span class="contactPerson">Contact Person </span>Mobile<span class="text-danger"> *</span></label>
|
|
<div class="input-group mb-2">
|
|
<!-- <div class="input-group-prepend"> -->
|
|
<div class="input-group-text">+91</div>
|
|
<!-- </div> -->
|
|
<input name="mobile"class="form-control" pattern="[0-9]{10}" value="<?= isset($customer['mobile_no']) ? $customer['mobile_no'] : '' ?>" type="tel" data-parsley-type="number" data-parsley-length="[10,10]" class="form-control" placeholder="Enter Contact Mobile" id="mobile" maxlength="10" onkeypress = "return onlyNumbers(event)" style="width: 80% !important;" required onchange="checkExisting(this,'mobile_no','mobile')">
|
|
<span id="mobileValidationMessage"></span>
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group col-md-4">
|
|
<label for="cmail" class="col-form-label"><span class="contactPerson">Contact Person </span>Email</label>
|
|
<input type="text" class="form-control" id="cmail" name="cmail" value="<?= isset($customer['email']) ? $customer['email'] : '' ?>" placeholder="Email" onkeyup="validateEmail(this.value)" onchange="checkExisting(this,'email','cmail')"/>
|
|
<span id="emailValidationMessage"></span>
|
|
</div>
|
|
|
|
<!-- <div class="form-group col-md-4">
|
|
<label for="dob" class="col-form-label">Date Of Birth</label>
|
|
<input type="date" class="form-control" name="dob" value="" placeholder="Date Of Birth" />
|
|
</div> -->
|
|
<div class="form-group col-md-4">
|
|
<label for="csname" class="col-form-label"><span class="contactPerson">Organization </span> PAN Number <i class="text-danger contactPerson"> *</i> </label>
|
|
<input type="text" class="form-control" id="pan_no"name="pan_no" required value="<?= isset($customer['pan_no']) ? $customer['pan_no'] : '' ?>" placeholder="PAN Number" onchange="checkExisting(this,'pan_no','pan_no')"/>
|
|
<span id="panValidationMessage"></span>
|
|
</div>
|
|
<div class="form-group col-md-4" id="adhar_no_individual">
|
|
<label for="csname" class="col-form-label"><span class="contactPerson"> </span>Aadhaar Number</label>
|
|
<input type="text" class="form-control" id="adhar_no" name="adhar_no" value="<?= isset($customer['adhar_no']) ? $customer['adhar_no'] : '' ?>" placeholder="Aadhaar Number" onchange="checkExisting(this,'adhar_no','adhar_no')"/>
|
|
<span id="adharValidationMessage"></span>
|
|
</div>
|
|
<div class="form-group col-md-4" id="passport_no_individual">
|
|
<label for="csname" class="col-form-label"><span class="contactPerson"> </span>Passport Number <i class="text-danger contactPerson"> *</i> </label>
|
|
<input type="text" class="form-control" id="passport_no"name="passport_no" value="<?= isset($customer['passport_no']) ? $customer['passport_no'] : '' ?>" placeholder="Passport Number" onchange="checkExisting(this,'passport_no','passport_no')"/>
|
|
<span id="passportValidationMessage" style="color: red;"></span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<input type="hidden" id="donor_id" name="donor_id" placeholder="hidden for Donor id" value="<?= isset($customer['donor_id']) ? $customer['donor_id'] : '' ?>" />
|
|
<input type="hidden" id="business_id" name="business_id" placeholder="hidden for business id" value="<?= $session_bid ?>" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
<br />
|
|
|
|
|
|
<div class="after-add-more">
|
|
<hr />
|
|
<div class="form-group">
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="baddress1" class="col-form-label">Address</label>
|
|
<textarea type="text" class="form-control" id="baddress1" name="address" placeholder="Address (eg : 1234 Main St)" style="width:202%" ><?= isset($customer['address']) ? $customer['address'] : '' ?></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-3">
|
|
<label for="bcountry" class="col-form-label">Country</label>
|
|
<select class="form-control" id="bcountry" name="country">
|
|
<option value="<?= isset($customer['country']) ? $customer['country'] : '';?>"><?= isset($customer['country']) ? $customer['country'] : '--Select--';?></option>
|
|
<?php foreach ($country_details as $value) { ?>
|
|
<option value="<?php echo $value['country_name']; ?>">
|
|
<?php
|
|
echo $value['country_name'];
|
|
?>
|
|
</option>
|
|
<?php } ?>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<div id="billinput" style="display: block">
|
|
<label for="bistate" class="col-form-label">State</label>
|
|
<input type="text" class="form-control" id="bistate" name="state_text" placeholder="State" value="<?= isset($customer['state']) ? $customer['state'] : ''?>"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="bcity" class="col-form-label">City</label>
|
|
<input type="text" class="form-control" id="bcity" name="city" value="<?= isset($customer['city']) ? $customer['city'] : '' ?>" placeholder="City" />
|
|
<div class="invalid-feedback"> Please provide. </div>
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label for="bzip" class="col-form-label">Postal Code</label>
|
|
<input type="text" class="form-control" id="bzip" name="zip" value="<?= isset($customer['postal_code']) ? $customer['postal_code'] : '' ?>" placeholder="Postal Code" pattern="\d*" maxlength="10" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
|
|
<?php if (!empty($customer)) { ?>
|
|
|
|
<br>
|
|
<?php } ?>
|
|
|
|
|
|
<div class="form-group text-right m-b-0">
|
|
|
|
<button class="btn btn-success waves-effect waves-light mr-1" id="submitBtn" type="submit"><?= isset($customer['donor_id']) ? 'Update' : 'Save' ?></button>
|
|
|
|
<a href="<?= base_url() . "Contributor_list"; ?>" class="btn btn-secondary waves-effect">Cancel</a>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
|
|
</div><!-- end card-body-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function checkValidityAndSetRequired() {
|
|
var type = document.getElementById('DonorType').value;
|
|
var panInput = document.getElementById('pan_no');
|
|
|
|
// Clear previous error messages
|
|
if (type === 'organization') {
|
|
panInput.setAttribute('required', 'required');
|
|
} else if (type === 'individual') {
|
|
panInput.removeAttribute('required');
|
|
}
|
|
}
|
|
|
|
document.getElementById('myForm').addEventListener('submit', function(event) {
|
|
var form = event.target;
|
|
|
|
// Call function to set required fields based on donor type
|
|
checkValidityAndSetRequired();
|
|
|
|
// Get invalid fields
|
|
var invalidFields = form.querySelectorAll('.is-invalid');
|
|
console.log("*** Invalid Fields ***");
|
|
invalidFields.forEach(function(field) {
|
|
console.log(field);
|
|
});
|
|
|
|
if (invalidFields.length > 0) {
|
|
invalidFields[0].focus();
|
|
console.log("**" + invalidFields[0]);
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var type = document.getElementById('DonorType').value;
|
|
var aadharValue = document.getElementById('adhar_no').value.trim();
|
|
var panValue = document.getElementById('pan_no').value.trim();
|
|
var passportValue = document.getElementById('passport_no').value.trim();
|
|
|
|
if (type === 'organization') {
|
|
if (panValue !== '' && !validatePANNumber(panValue)) {
|
|
event.preventDefault(); // Prevent form submission if PAN is not valid
|
|
return;
|
|
}
|
|
} else if (type === 'individual') {
|
|
if (aadharValue !== '' && !validateAdharNumber(aadharValue)) {
|
|
event.preventDefault(); // Prevent form submission if Aadhaar is not valid
|
|
return;
|
|
}
|
|
if (panValue !== '' && !validatePANNumber(panValue)) {
|
|
event.preventDefault(); // Prevent form submission if PAN is not valid
|
|
return;
|
|
}
|
|
if (passportValue !== '' && !validatePassport(passportValue)) {
|
|
event.preventDefault(); // Prevent form submission if Passport is not valid
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity(); // Display validation error messages
|
|
event.preventDefault(); // Prevent form submission if form is not valid
|
|
}
|
|
});
|
|
|
|
// if (form.checkValidity() === true) {
|
|
|
|
// form.reportValidity(); // Display validation error messages
|
|
// event.preventDefault(); // Prevent form submission if it's not valid
|
|
// $('#submitBtn').prop('disabled', false);
|
|
// } else {
|
|
|
|
// $('#submitBtn').prop('disabled', true);
|
|
// }
|
|
|
|
</script>
|
|
<script>
|
|
function onlyNumbers(event){
|
|
var charcode;
|
|
charcode = event.which || event.keyCode;
|
|
if(charcode>= 48 && charcode <= 57)return true;
|
|
return false;
|
|
}
|
|
function validateEmail(email) {
|
|
// Regular expression for a Gmail, Yahoo, or Hotmail email address validation
|
|
var emailPattern = /^(.+)@(gmail\.com|yahoo\.com|hotmail\.com|[^@]+\.com)$/i;
|
|
|
|
var emailInput = document.getElementById("cmail");
|
|
var validationMessage = document.getElementById("emailValidationMessage");
|
|
|
|
if (emailPattern.test(email)) {
|
|
validationMessage.textContent = "";
|
|
} else if (email == "") {
|
|
validationMessage.textContent = "";
|
|
} else {
|
|
validationMessage.textContent = "Invalid email address.";
|
|
validationMessage.style.color = "red";
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
function restriction(event) {
|
|
var charCode = event.which || event.keyCode;
|
|
if ((charCode >= 48 && charCode <= 57)) {
|
|
return true;
|
|
} else {
|
|
event.preventDefault(); // Prevent the character from being entered
|
|
return false;
|
|
}
|
|
}
|
|
$(document).ready(function() {
|
|
// Initial setup based on donor type
|
|
updateDonorTypeFields();
|
|
|
|
// Handle changes in donor type
|
|
$('#DonorType').on('change', function(){
|
|
updateDonorTypeFields();
|
|
});
|
|
|
|
// Validate Aadhar number on input
|
|
$('#adhar_no').on('input', function(){
|
|
validateAdharNumber($(this).val());
|
|
});
|
|
|
|
// Validate PAN number on input
|
|
$('#pan_no').on('input', function(){
|
|
validatePANNumber($(this).val());
|
|
});
|
|
|
|
$('#passport_no').on('input', function(){
|
|
validatePassport($(this).val());
|
|
});
|
|
|
|
function updateDonorTypeFields() {
|
|
let DonorType = $('#DonorType').val();
|
|
|
|
// Organization type selected
|
|
if (DonorType === 'organization') {
|
|
$('#org_name').show();
|
|
$('#org_reg').show();
|
|
$('.contactPerson').show();
|
|
$('#adhar_no_individual').hide();
|
|
$('#passport_no_individual').hide();
|
|
$('#org_name_field').prop('required', true);
|
|
$('#org_reg_details').prop('required', true);
|
|
$('#pan_no').prop('required', true);
|
|
}
|
|
// Individual type selected
|
|
else {
|
|
$('#adhar_no_individual').show();
|
|
$('#passport_no_individual').show();
|
|
$('#org_name').hide();
|
|
$('#org_reg').hide();
|
|
$('.contactPerson').hide();
|
|
$('#pan_no').prop('required', false);
|
|
}
|
|
}
|
|
|
|
function validateAdharNumber(adharNumber) {
|
|
let adharPattern = /^\d{12}$/;
|
|
|
|
if (!adharPattern.test(adharNumber)) {
|
|
$('#adhar_no').addClass('is-invalid');
|
|
return false;
|
|
} else {
|
|
$('#adhar_no').removeClass('is-invalid');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function validatePANNumber(panNumber) {
|
|
let panPattern = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
|
|
if (!panPattern.test(panNumber)) {
|
|
$('#pan_no').addClass('is-invalid');
|
|
return false;
|
|
} else {
|
|
$('#pan_no').removeClass('is-invalid');
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function validatePassport(passport) {
|
|
// Check length (8 to 12 characters)
|
|
if (passport.length < 8 || passport.length > 12) {
|
|
$('#passport_no').addClass('is-invalid');
|
|
return false;
|
|
}
|
|
|
|
// Check first character for type of passport (P, D, S)
|
|
const type = passport.charAt(0);
|
|
if (!['P', 'D', 'S'].includes(type)) {
|
|
$('#passport_no').addClass('is-invalid');
|
|
return false;
|
|
}
|
|
|
|
// Check that the rest of the characters are alphanumeric
|
|
const rest = passport.slice(1);
|
|
const alphanumericRegex = /^[a-zA-Z0-9]+$/;
|
|
if (!alphanumericRegex.test(rest)) {
|
|
$('#passport_no').addClass('is-invalid');
|
|
return false;
|
|
}
|
|
$('#passport_no').removeClass('is-invalid');
|
|
return true;
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var editButton = document.getElementById('editButton');
|
|
var formElements = document.getElementById('myForm').elements;
|
|
var donorId = <?= isset($customer['donor_id']) ? $customer['donor_id'] : 0 ?>;
|
|
var isEditable = donorId === 0; // Set initial edit mode based on donor ID
|
|
|
|
// Hide the edit button if donor ID is 0
|
|
if (donorId === 0) {
|
|
editButton.style.display = 'none';
|
|
}
|
|
|
|
// Add event listener to the button
|
|
editButton.addEventListener('click', function() {
|
|
isEditable = true; // Enable edit mode when button is clicked
|
|
toggleFormElements();
|
|
});
|
|
|
|
// Enable or disable form elements based on edit mode
|
|
function toggleFormElements() {
|
|
for (var i = 0; i < formElements.length; i++) {
|
|
// Enable or disable form elements based on edit mode
|
|
formElements[i].disabled = !isEditable;
|
|
}
|
|
|
|
// Enable or disable the submit button based on the edit mode
|
|
document.getElementById('submitBtn').disabled = !isEditable;
|
|
}
|
|
|
|
// Initialize form elements state
|
|
toggleFormElements();
|
|
});
|
|
</script>
|
|
<script>
|
|
function checkExisting(input,databasecolumnname,elementid){
|
|
|
|
switch(elementid){
|
|
case 'pan_no' :
|
|
spanid = "panValidationMessage"; break;
|
|
case 'cmail' :
|
|
spanid = "emailValidationMessage"; break;
|
|
case 'mobile' :
|
|
spanid = "mobileValidationMessage"; break;
|
|
case 'adhar_no' :
|
|
spanid = "adharValidationMessage"; break;
|
|
case 'passport_no':
|
|
spanid = "passportValidationMessage"; break;
|
|
}
|
|
var validationMessage = document.getElementById(spanid);
|
|
resetValidationMessage(spanid);
|
|
var value = input.value.trim();
|
|
if (value === "") {
|
|
validationMessage.style.display = 'none';
|
|
return;
|
|
}else{
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "<?= base_url() . 'check_existing' ?>",
|
|
data: {
|
|
value: value,
|
|
module: 'donor',
|
|
field: databasecolumnname
|
|
},
|
|
success: function(response) {
|
|
|
|
console.log("check existing " + elementid + "--" + response['data']['message']);
|
|
validationMessage.style.display = response['data']['status'] ? 'block' : 'none';
|
|
validationMessage.innerText = response['data']['message'];
|
|
validationMessage.style.color = "red";
|
|
input.setCustomValidity(response['data']['status'] ? response['data']['message'] : '');
|
|
if (response['data']['status']) input.value = '';
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("check existing " + elementid + " -- " + status + ": " + error);
|
|
}
|
|
});
|
|
}}
|
|
function resetValidationMessage(spanid) {
|
|
var validationMessage = document.getElementById(spanid);
|
|
validationMessage.style.display = 'none';
|
|
validationMessage.innerText = '';
|
|
validationMessage.style.color = '';
|
|
}
|
|
</script>
|