File "profile_setup.php"
Full Path: /home/ccipcixf/public_html/miportal/profile_setup.php
File size: 42.89 KB
MIME-type: text/x-php
Charset: utf-8
<?php
include("userauth_middleware.php");
?>
<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CCI - MSPortal</title>
<link rel="icon" type="image/png" href="./admin/assets/images/cci_favicon.png" sizes="16x16">
<!-- remix icon font css -->
<link rel="stylesheet" href="./admin/assets/css/remixicon.css">
<!-- BootStrap css -->
<link rel="stylesheet" href="./admin/assets/css/lib/bootstrap.min.css">
<!-- Apex Chart css -->
<link rel="stylesheet" href="./admin/assets/css/lib/apexcharts.css">
<!-- Data Table css -->
<link rel="stylesheet" href="./admin/assets/css/lib/dataTables.min.css">
<!-- Text Editor css -->
<link rel="stylesheet" href="./admin/assets/css/lib/editor-katex.min.css">
<link rel="stylesheet" href="./admin/assets/css/lib/editor.atom-one-dark.min.css">
<link rel="stylesheet" href="./admin/assets/css/lib/editor.quill.snow.css">
<!-- Date picker css -->
<link rel="stylesheet" href="./admin/assets/css/lib/flatpickr.min.css">
<!-- Calendar css -->
<link rel="stylesheet" href="./admin/assets/css/lib/full-calendar.css">
<!-- Vector Map css -->
<link rel="stylesheet" href="./admin/assets/css/lib/jquery-jvectormap-2.0.5.css">
<!-- Popup css -->
<link rel="stylesheet" href="./admin/assets/css/lib/magnific-popup.css">
<!-- Slick Slider css -->
<link rel="stylesheet" href="./admin/assets/css/lib/slick.css">
<!-- prism css -->
<link rel="stylesheet" href="./admin/assets/css/lib/prism.css">
<!-- file upload css -->
<link rel="stylesheet" href="./admin/assets/css/lib/file-upload.css">
<link rel="stylesheet" href="./admin/assets/css/lib/audioplayer.css">
<!-- main css -->
<link rel="stylesheet" href="./admin/assets/css/style.css">
<style>
/* Simple CSS to make the loader more visually appealing */
#loader {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
font-size: 20px;
color: #333;
}
#loader h3 {
margin: 0;
}
</style>
</head>
<body>
<!-- Add a loader that will be shown during profile update -->
<div id="loader" style="display: none;">
<h3>Processing... Please Wait</h3>
</div>
<div class="dashboard-main-body">
<div class="row">
<div class="col-lg-12 text-center ">
<h4>Setup Your Profile</h4>
</div>
</div>
<div class="row gy-4 justify-content-center">
<div class="col-lg-8">
<div class="card h-100">
<div class="card-body p-24">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-edit-profile" role="tabpanel" aria-labelledby="pills-edit-profile-tab" tabindex="0">
<form id="profile-form" action="creating_profile.php" method="POST" enctype="multipart/form-data">
<h6 class="text-md text-primary-light mb-16 text-center">Profile Image</h6>
<!-- Upload Image Start -->
<div class="mb-24 mt-16 d-flex justify-content-center">
<div class="avatar-upload">
<div class="avatar-edit position-absolute bottom-0 end-0 me-24 mt-16 z-1 cursor-pointer">
<input required name="profile_image" type='file' id="imageUpload" accept=".png, .jpg, .jpeg" hidden>
<label for="imageUpload" class="w-32-px h-32-px d-flex justify-content-center align-items-center bg-primary-50 text-primary-600 border border-primary-600 bg-hover-primary-100 text-lg rounded-circle">
<iconify-icon icon="solar:camera-outline" class="icon"></iconify-icon>
</label>
</div>
<div class="avatar-preview">
<div id="imagePreview">
</div>
</div>
</div>
</div>
<!-- Upload Image End -->
<div class="row">
<div class="col-sm-6">
<div class="mb-20">
<label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Full Name <span class="text-danger-600">*</span></label>
<input required name="fullname" type="text" class="form-control radius-8" id="name" placeholder="Enter Full Name">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="email" class="form-label fw-semibold text-primary-light text-sm mb-8">Email <span class="text-danger-600">*</span></label>
<input disabled type="email" class="form-control radius-8" id="email" placeholder="Enter email address" value="<?php echo $_SESSION['user_acc_email'] ?>">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="validationCustomPhone" class="form-label fw-semibold text-primary-light text-sm mb-8">Phone: <span style="color: red;">*(0312-1234234) </span> </label>
<input required pattern="^[0-9]{4}-[0-9]{7}$" name="user_phone" type="tel" class="form-control radius-8" id="validationCustomPhone" placeholder="Enter phone number">
<div class="invalid-feedback">Please provide a valid phone number (format: 0000-0000000).</div>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="depart" class="form-label fw-semibold text-primary-light text-sm mb-8">Gender <span class="text-danger-600">*</span> </label>
<select required name="user_gender" class="form-control radius-8 form-select" id="depart">
<option selected disabled>Choose Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="dob" class="form-label fw-semibold text-primary-light text-sm mb-8">Date of Birth <span class="text-danger-600">*</span> </label>
<input required name="user_dob" type="date" class="form-control radius-8" id="dob">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Current Address <span class="text-danger-600">*</span> </label>
<input required name="user_address" type="text" class="form-control radius-8" id="#" placeholder="Enter Current Address">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="depart" class="form-label fw-semibold text-primary-light text-sm mb-8">City<span class="text-danger-600">*</span> </label>
<select required name="user_city" class="form-control radius-8 form-select" id="depart">
<option selected disabled>Choose City</option>
<option value="Karachi">Karachi</option>
<option value="Lahore">Lahore</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Islamabad">Islamabad</option>
<option value="Multan">Multan</option>
<option value="Peshawar">Peshawar</option>
<option value="Quetta">Quetta</option>
<option value="Nawabshah">Nawabshah</option>
<option value="Sukkur">Sukkur</option>
<option value="Rawalpindi">Rawalpindi</option>
<option value="Chakwal">Chakwal</option>
<option value="Gujranwala">Gujranwala</option>
<option value="DG Khan">DG Khan</option>
<option value="Sialkot">Sialkot</option>
<option value="Rahim Yar Khan">Rahim Yar Khan</option>
<option value="Gujrat">Gujrat</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Age<span class="text-danger-600">*</span> </label>
<input required min="18" max="60" name="user_age" type="number" class="form-control radius-8" id="#" placeholder="Enter Age">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="validationCustomCnic" class="form-label fw-semibold text-primary-light text-sm mb-8">CNIC: <span class="text-danger">*(42123-1234445-2)</span> </label>
<input required pattern="^[0-9]{5}-[0-9]{7}-[0-9]$" name="user_cnic" type="text" class="form-control radius-8" id="validationCustomCnic" placeholder="Enter CNIC">
<div class="invalid-feedback">Please provide a valid CNIC number (format: 12345-1234567-1).</div>
</div>
</div>
<!-- Payment Option -->
<div class="col-sm-6">
<div class="mb-20">
<label for="user_payment" class="form-label fw-semibold text-primary-light text-sm mb-8">Payment Preference: <span class="text-danger-600">*</span> </label>
<select required name="user_payment" class="form-control radius-8 form-select" id="paymentOption">
<option selected disabled>Choose Payment Option</option>
<option value="bank">Bank Transfer</option>
<option value="nayapay">NayaPay</option>
<option value="sadapay">SadaPay</option>
<option value="easypaisa">Easypaisa</option>
<option value="jazzcash">JazzCash</option>
</select>
</div>
</div>
<!-- Bank Transfer -->
<div class="row mt-3 payment-fields" id="bank-fields" style="display:none;">
<div class="col-sm-4">
<div class="mb-20">
<label for="user_bankname" class="form-label fw-semibold text-primary-light text-sm mb-8">Bank Name: <span class="text-danger-600">*</span> </label>
<input name="user_bankname" type="text" class="form-control radius-8" placeholder="Enter Bank Name">
</div>
</div>
<div class="col-sm-4">
<div class="mb-20">
<label for="user_acctitle" class="form-label fw-semibold text-primary-light text-sm mb-8">Account Title: <span class="text-danger-600">*</span> </label>
<input name="user_acctitle" type="text" class="form-control radius-8" placeholder="Enter Account Title">
</div>
</div>
<div class="col-sm-4">
<div class="mb-20">
<label for="user_accnumber" class="form-label fw-semibold text-primary-light text-sm mb-8">Account Number: <span class="text-danger-600">*</span> </label>
<input name="user_accnumber" type="text" class="form-control radius-8" placeholder="Enter Account Number">
</div>
</div>
</div>
<!-- Nayapay -->
<div class="row mt-3 payment-fields" id="nayapay-fields" style="display:none;">
<div class="col-sm-6">
<div class="mb-20">
<label for="user_acctitlenayapay" class="form-label fw-semibold text-primary-light text-sm mb-8">Nayapay Account Title: <span class="text-danger-600">*</span> </label>
<input name="user_acctitlenayapay" type="text" class="form-control radius-8" placeholder="Enter Account Title">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="user_accnumbernayapay" class="form-label fw-semibold text-primary-light text-sm mb-8">Nayapay Account Number: <span class="text-danger-600">*</span> </label>
<input name="user_accnumbernayapay" type="text" class="form-control radius-8" placeholder="Enter Account Number">
</div>
</div>
</div>
<!-- SadaPay -->
<div class="row mt-3 payment-fields" id="sadapay-fields" style="display:none;">
<div class="col-sm-6">
<div class="mb-20">
<label for="user_acctitlesadapay" class="form-label fw-semibold text-primary-light text-sm mb-8">SadaPay Account Title: <span class="text-danger-600">*</span> </label>
<input name="user_acctitlesadapay" type="text" class="form-control radius-8" placeholder="Enter Account Title">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="user_accnumbersadapay" class="form-label fw-semibold text-primary-light text-sm mb-8">SadaPay Account Number: <span class="text-danger-600">*</span> </label>
<input name="user_accnumbersadapay" type="text" class="form-control radius-8" placeholder="Enter Account Number">
</div>
</div>
</div>
<!-- Easypaisa -->
<div class="row mt-3 payment-fields" id="easypaisa-fields" style="display:none;">
<div class="col-sm-6">
<div class="mb-20">
<label for="user_acctitleeasypaisa" class="form-label fw-semibold text-primary-light text-sm mb-8">EasyPaisa Account Title: <span class="text-danger-600">*</span> </label>
<input name="user_acctitleeasypaisa" type="text" class="form-control radius-8" placeholder="Enter Account Title">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="user_accnumbereasypaisa" class="form-label fw-semibold text-primary-light text-sm mb-8">EasyPaisa Account Number: <span class="text-danger-600">*</span> </label>
<input name="user_accnumbereasypaisa" type="text" class="form-control radius-8" placeholder="Enter Account Number">
</div>
</div>
</div>
<!-- JazzCash -->
<div class="row mt-3 payment-fields" id="jazzcash-fields" style="display:none;">
<div class="col-sm-6">
<div class="mb-20">
<label for="user_acctitlejazzcash" class="form-label fw-semibold text-primary-light text-sm mb-8">JazzCash Account Title: <span class="text-danger-600">*</span> </label>
<input name="user_acctitlejazzcash" type="text" class="form-control radius-8" placeholder="Enter Account Title">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="user_accnumberjazzcash" class="form-label fw-semibold text-primary-light text-sm mb-8">JazzCash Account Number: <span class="text-danger-600">*</span> </label>
<input name="user_accnumberjazzcash" type="text" class="form-control radius-8" placeholder="Enter Account Number">
</div>
</div>
</div>
<!-- Qualification and Experience -->
<div class="col-sm-6">
<div class="mb-20">
<label for="q1" class="form-label fw-semibold text-primary-light text-sm mb-8">Q1: Highest Level of Education Completed:<span class="text-danger-600">*</span> </label>
<select required name="q1" class="form-control radius-8 form-select" id="q1">
<option selected disabled>Choose!!</option>
<option value="High School Diploma">High School Diploma</option>
<option value="Intermediate Degree">Intermediate Degree</option>
<option value="Bachelor’s Degree">Bachelor’s Degree</option>
<option value="Master’s Degree">Master’s Degree</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q2" class="form-label fw-semibold text-primary-light text-sm mb-8">Q2: Do you have your own vehicle?:<span class="text-danger-600">*</span> </label>
<select required name="q2" class="form-control radius-8 form-select" id="q2">
<option selected disabled>Choose!!</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q3" class="form-label fw-semibold text-primary-light text-sm mb-8">Q3: Type of Vehicle?:<span class="text-danger-600">*</span> </label>
<select required name="q3" class="form-control radius-8 form-select" id="q3">
<option selected disabled>Choose!!</option>
<option value="Bike">Bike</option>
<option value="Sedan">Sedan</option>
<option value="Cross Over">Cross Over</option>
<option value="SUV">SUV</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q4" class="form-label fw-semibold text-primary-light text-sm mb-8">Q4: Have you ever worked as a mystery shopper before?:<span class="text-danger-600">*</span> </label>
<select required name="q4" class="form-control radius-8 form-select" id="q4">
<option selected disabled>Choose!!</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q5" class="form-label fw-semibold text-primary-light text-sm mb-8">Q5: Are you comfortable using digital tools and apps for submitting reports and feedback?:<span class="text-danger-600">*</span> </label>
<select required name="q5" class="form-control radius-8 form-select" id="q5">
<option selected disabled>Choose!!</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q6" class="form-label fw-semibold text-primary-light text-sm mb-8">Q6: How comfortable are you with different types of mystery shopping?:<span class="text-danger-600">*</span> </label>
<select required name="q6" class="form-control radius-8 form-select" id="q6">
<option selected disabled>Choose!!</option>
<option value="In-person Mystery Shopping">In-person Mystery Shopping</option>
<option value="Video Mystery Shopping">Video Mystery Shopping</option>
<option value="Audio Mystery Shopping">Audio Mystery Shopping</option>
<option value="Email Mystery Shopping">Email Mystery Shopping</option>
<option value="Not Applicable">Not Applicable</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q7" class="form-label fw-semibold text-primary-light text-sm mb-8">Q7: To conduct mystery shopping assignments what is your availability:<span class="text-danger-600">*</span> </label>
<select required name="q7" class="form-control radius-8 form-select" id="q7">
<option selected disabled>Choose!!</option>
<option value="Week Days">Week Days</option>
<option value="Week Ends">Week Ends</option>
<option value="Anytime">Anytime</option>
</select>
</div>
</div>
<!-- Employment Status and Industry Background -->
<div class="col-sm-6">
<div class="mb-20">
<label for="q8" class="form-label fw-semibold text-primary-light text-sm mb-8">Q8: Are you currently employed?:<span class="text-danger-600">*</span> </label>
<select required name="q8" class="form-control radius-8 form-select mt-3" id="q8">
<option selected disabled>Choose!!</option>
<option value="Yes Employed">Yes Employed</option>
<option value="No Unemployed">No Unemployed</option>
<option value="Own Business">Own Business</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q9" class="form-label fw-semibold text-primary-light text-sm mb-8">Q9: What industry does your current employer/company belong to?: </label>
<select name="q9" class="form-control radius-8 form-select" id="q9">
<option selected disabled>Choose!!</option>
<option value="Retail">Retail</option>
<option value="Hospitality">Hospitality</option>
<option value="Finance">Finance</option>
<option value="Healthcare">Healthcare</option>
<option value="Education">Education</option>
<option value="Information Technology">Information Technology</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q10" class="form-label fw-semibold text-primary-light text-sm mb-8">Q10: What is your current job title or position?: </label>
<input name="q10" type="text" class="form-control radius-8 mt-3" id="q10" placeholder="Job Tilte">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q11" class="form-label fw-semibold text-primary-light text-sm mb-8">Q11: Which salary bracket do you fall?: </label>
<select name="q11" class="form-control radius-8 form-select" id="q11">
<option selected disabled>Choose!!</option>
<option value="Rs. 0 - Rs. 50,000">Rs. 0 - Rs. 50,000</option>
<option value="Rs. 50,000 - Rs. 100,000">Rs. 50,000 - Rs. 100,000</option>
<option value="Rs. 100,000 - Rs. 200,000">Rs. 100,000 - Rs. 200,000</option>
<option value="Rs. 200,000 - Rs. 400,000">Rs. 200,000 - Rs. 400,000</option>
<option value="Rs. 400,000 - More">Rs. 400,000 - More</option>
</select>
</div>
</div>
<!-- Preferences -->
<div class="col-sm-6">
<div class="mb-20">
<label for="q12" class="form-label fw-semibold text-primary-light text-sm mb-8">Q12: Shopping Preferences:<span class="text-danger-600">*</span> </label>
<select required name="q12" class="form-control radius-8 form-select" id="q12">
<option selected disabled>Choose!!</option>
<option value="Retail">Retail</option>
<option value="Restaurants">Restaurants</option>
<option value="Hospitality">Hospitality</option>
<option value="Customer Service Centers">Customer Service Centers</option>
<option value="Healthcare Services">Healthcare Services</option>
<option value="Automotive">Automotive</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="q13" class="form-label fw-semibold text-primary-light text-sm mb-8">Q13: Would you participate in online research (survey/research study)?:<span class="text-danger-600">*</span> </label>
<select required name="q13" class="form-control radius-8 form-select" id="q13">
<option selected disabled>Choose!!</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="col-sm-12">
<h5>Confidentiality Agreement:</h5>
<p>By registering as a Mystery Shopper, I agree to maintain confidentiality and not disclose any details of the Mystery Shopping assignments or clients.</p>
<div class="d-flex align-items-center gap-10">
<div class="form-check style-check d-flex align-items-center">
<input required class="form-check-input radius-4 border border-neutral-400" type="checkbox" name="agreement" value="Checked">
</div>
I Agree
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-center gap-3 mt-5">
<button name="btn_submit" type="submit" class="btn btn-primary border border-primary-600 text-md px-56 py-12 radius-8">
Setup Profile
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library js -->
<script src="./admin/assets/js/lib/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js -->
<script src="./admin/assets/js/lib/bootstrap.bundle.min.js"></script>
<!-- Apex Chart js -->
<!-- <script src="./admin/assets/js/lib/apexcharts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- Data Table js -->
<script src="./admin/assets/js/lib/dataTables.min.js"></script>
<!-- Iconify Font js -->
<script src="./admin/assets/js/lib/iconify-icon.min.js"></script>
<!-- jQuery UI js -->
<script src="./admin/assets/js/lib/jquery-ui.min.js"></script>
<!-- Vector Map js -->
<script src="./admin/assets/js/lib/jquery-jvectormap-2.0.5.min.js"></script>
<script src="./admin/assets/js/lib/jquery-jvectormap-world-mill-en.js"></script>
<!-- Popup js -->
<script src="./admin/assets/js/lib/magnifc-popup.min.js"></script>
<!-- Slick Slider js -->
<script src="./admin/assets/js/lib/slick.min.js"></script>
<!-- prism js -->
<script src="./admin/assets/js/lib/prism.js"></script>
<!-- file upload js -->
<script src="./admin/assets/js/lib/file-upload.js"></script>
<!-- audioplayer -->
<script src="./admin/assets/js/lib/audioplayer.js"></script>
<!-- main js -->
<script src="./admin/assets/js/app.js"></script>
<!-- Include SweetAlert2 and jQuery -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ======================== Upload Image Start =====================
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
// ======================== Upload Image End =====================
// ================== Password Show Hide Js Start ==========
function initializePasswordToggle(toggleSelector) {
$(toggleSelector).on('click', function() {
$(this).toggleClass("ri-eye-off-line");
var input = $($(this).attr("data-toggle"));
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
}
// Call the function
initializePasswordToggle('.toggle-password');
// ========================= Password Show Hide Js End ===========================
// CNIC input formatting dynamically as user types
const cnicInput = document.getElementById('validationCustomCnic');
cnicInput.addEventListener('input', (e) => {
let input = cnicInput.value.replace(/\D/g, ''); // Remove all non-digit characters
if (input.length > 5) {
input = input.substring(0, 5) + '-' + input.substring(5);
}
if (input.length > 13) {
input = input.substring(0, 13) + '-' + input.substring(13);
}
cnicInput.value = input.substring(0, 15); // Restrict input length to 15 characters (12345-1234567-1)
});
// Phone input formatting dynamically as user types
const phoneInput = document.getElementById('validationCustomPhone');
phoneInput.addEventListener('input', (e) => {
let input = phoneInput.value.replace(/\D/g, ''); // Remove all non-digit characters
if (input.length > 4) {
input = input.substring(0, 4) + '-' + input.substring(4); // Insert hyphen after the first 4 digits
}
phoneInput.value = input.substring(0, 12); // Restrict input length to 12 characters (0000-0000000)
});
// Payment Option Dropdown
document.getElementById('paymentOption').addEventListener('change', function() {
// Hide all payment fields first
const paymentFields = document.querySelectorAll('.payment-fields');
paymentFields.forEach(function(field) {
field.style.display = 'none';
});
// Show the selected payment fields
const selectedOption = this.value;
if (selectedOption) {
document.getElementById(`${selectedOption}-fields`).style.display = 'flex';
}
});
document.getElementById('q8').addEventListener('change', function () {
const isUnemployed = this.value === 'No Unemployed';
const fieldsToDisable = ['q9', 'q10', 'q11'];
fieldsToDisable.forEach(fieldId => {
const field = document.getElementById(fieldId);
field.disabled = isUnemployed;
if (isUnemployed) {
field.value = ''; // Clear the field value if disabling
}
});
});
</script>
</body>
</html>