File: /var/www/html/dooblo.cccinfotech.com/wp-content/themes/dooblo/paddle-pricingspecific.php
<?php
/**
* Template Name: Paddle PricingSpecific
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package Dooblo
*/
get_header(); ?>
<style>
.page-container {
max-width: 1200px;
margin: 0 auto 2em auto;
padding-left: 1em;
padding-right: 1em;
}
input{
margin:0px !important;
}
.grid {
display: block;
}
.grid>* {
padding: 1rem;
}
@media (min-width: 768px) {
.grid {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr;
gap:6em;
}
}
table thead {
background-color: var(--color-table);
border-collapse: collapse;
border-radius: var(--border-radius);
color: var(--color-bg);
margin: 0;
padding: 0;
}
table {
border: 1px solid var(--color-bg-secondary);
border-radius: var(--border-radius);
border-spacing: 0;
display: inline-block;
max-width: 100%;
overflow-x: auto;
padding: 0;
white-space: nowrap;
}
.items-table,
.new-table {
font-size: smaller;
font-size: 16px;
font-weight: 500;
color: #000000;
}
table.items-table tbody td{
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, rgba(151,189,92,1) 16%, rgba(122,176,101,1) 75%);
border-image-slice: 1;
font-weight: 400;
font-size: 14px;
color: rgba(78, 85, 101, 1);
/* width:100%; */
}
table.new-table,
td {
border-collapse: collapse;
width:100%;
/* border-bottom: 1px solid red; */
/* border-bottom: 1px solid #d2d4de; */
}
.items-table tr td {
padding: 15px 0px 10px 0px;
width: 50%;
}
.items-table tbody tr td:nth-child(2) {
text-align:center;
}
.items-table tr th {
border-bottom: 1px solid #d2d4de;
padding: 10px 0px;
}
.new-table tr td{
padding: 0px;
height: 40px;
vertical-align: middle;
/* text-align:center; */
}
#SwitchPlan1, #SwitchPlan2 {
accent-color: rgba(104, 156, 32, 1);
width: 10px;
height:auto;
}
</style>
<!-- MVP.css: https://andybrewer.github.io/mvp/ -->
<!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css@1.12.0/mvp.css" media="print" onload="this.media='all'"> -->
<body >
<div id="pricing-page" class="content-area" <?php post_class(); ?>>
<div id="top-page"></div>
<section class="pricing-top">
<div class="bg-image" style="<?php the_field('top_header_background_image'); ?>"></div>
<div class="bg-dark"></div>
<div class="info">
<h1>Secure Payment Page</h1>
<h2>Secured by SurveyToGo and ready for your payment</h2>
<h2>
By purchasing you agree to the
<a href="http://dooblo.cccinfotech.com/surveytogo-terms-of-service/">terms and conditions and retention policy</a>
</h2>
</div>
</section>
</div>
<div style="margin-bottom:20px">
<h2 style="text-align:center; font-size:18px; background: rgb(151,189,92); background: linear-gradient(90deg, #95C048 0%, #63B05C 100%); padding: 15px 0px; color:#ffffff; font-weight:500;">Payment</h2>
</div>
<div class="page-container">
<div class="grid">
<div id="company-info">
<!-- <h3 style="font-size: 28px; font-weight: 300; color: #000000; margin-bottom: 15px;">Company Information</h3> -->
<form id="companyForm">
<!-- Company Name Field -->
<div style="margin-bottom: 15px;">
<label for="companyName" style="font-size: 14px; color:#999999; font-weight: 400;">Company Name:<span style="color: red">*</span></label><br>
<input type="text" id="companyName" name="companyName" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px;" />
<!-- <div id="companyNameError" style="color: red; font-size: 12px; display: none;">This field is required.</div> -->
</div>
<!-- Name Field -->
<div style="margin-bottom: 15px;">
<label for="WholeName" style="font-size: 14px; color:#999999; font-weight: 400;">Full Name:<span style="color: red">*</span></label><br>
<input type="text" id="WholeName" name="WholeName" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px;" />
<!--<div id="WholeNameError" style="color: red; font-size: 12px; display: none;">This field is required.</div> -->
</div>
<!-- Company Email Field -->
<div style="margin-bottom: 15px;">
<label for="companyEmail" style="font-size: 14px; color:#999999; font-weight: 400;">Company Email:<span style="color: red">*</span></label><br>
<input type="email" id="companyEmail" name="companyEmail" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px;" />
<div id="companyEmailError" style="color: red; font-size: 12px; display: none;">Invalid email.</div>
</div>
<!-- Phone Field -->
<div style="margin-bottom: 15px;">
<label for="companyPhone" style="font-size: 14px; color:#999999; font-weight: 400;">Phone:<span style="color: red">*</span></label><br>
<input type="tel" id="companyPhone" name="companyPhone" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px;" />
<div id="companyPhoneError" style="color: red; font-size: 12px; display: none;">Invalid phone number.</div>
</div>
<!-- Country Field -->
<div style="margin-bottom: 15px;">
<label for="country" style="font-size: 14px; color:#999999; font-weight: 400;">Country:<span style="color: red">*</span></label><br>
<select id="country" name="country" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px; padding:10px 20px;">
<option value="">Select a country</option>
</select>
<div id="countryError" style="color: red; font-size: 12px; display: none;">Please select a country.</div>
</div>
<!-- Country Field -->
<div style="margin-bottom: 15px; display: none;" id="stateDiv" >
<label for="state" style="font-size: 14px; color:#999999; font-weight: 400;">Regions:<span style="color: red">*</span></label><br>
<select id="state" name="state" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px; padding:10px 20px;">
<option value="">Select a regions</option>
</select>
<div id="stateError" style="color: red; font-size: 12px; display: none;">Please select a regions.</div>
</div>
<!-- Address Field -->
<div style="margin-bottom: 15px;">
<label for="companyAddress" style="font-size: 14px; color:#999999; font-weight: 400;">Address:<span style="color: red">*</span></label><br>
<input id="companyAddress" name="companyAddress" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px; padding:10px 20px;" />
<!-- <div id="companyAddressError" style="color: red; font-size: 12px; display: none;">Illegal Value.</div> -->
</div>
<!-- Other Fields (Not Mandatory) -->
<div style="margin-bottom: 15px;">
<label for="cityAddress" style="font-size: 14px; color:#999999; font-weight: 400;">City:</label><br>
<input id="cityAddress" name="cityAddress" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px; padding:10px 20px; margin:10px 8px;"></input>
</div>
<div style="margin-bottom: 15px;">
<label for="zipAddress" style="font-size: 14px; color:#999999; font-weight: 400;">Zip/Postal Code:<span style="color: red">*</span></label><br>
<input id="zipAddress" name="zipAddress" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px; padding:10px 20px; margin:10px 8px;"></input>
<div id="zipAddressError" style="color: red; font-size: 12px; display: none;">Invalid postal code.</div>
</div>
<div style="margin-bottom: 15px;">
<label for="orgid" style="font-size: 14px; color:#999999; font-weight: 400;">OrgID</label><br>
<input id="orgid" name="orgid" style="width: 100%; border: 1px solid #d2d4de; border-radius: 4px; padding:10px 20px; margin:10px 8px;"></input>
</div>
</form>
</div>
<!-- Items Section -->
<div>
<div>
<!-- <h3 style="font-size: 35px; font-weight:300; margin-bottom:20px">Items</h3> -->
<table class="items-table" width="100%">
<thead style="border-bottom:1px solid red;">
<tr>
<th width="40%" style="font-size: 14px; color:#999999; font-weight: 400;">Product</th>
<!--<th width="25%" style="font-size: 14px; color:#999999; font-weight: 400;">Price name</th>-->
<th width="10%" style="font-size: 14px; color:#999999; font-weight: 400; text-align:center;">Quantity</th>
<th width="30%" style="font-size: 14px; color:#999999; font-weight: 400;">SubTotal</th>
</tr>
</thead>
<tbody>
<tr>
<td width="60%" style="font-weight: 400; color: #4E5565; font-size: 14px;"></td>
<td width="10%" style="font-weight: 400; color: #4E5565; font-size: 14px; text-align:center;">0</td>
<td width="30%" style="font-weight: 400; color: #4E5565; font-size: 14px;">00.00</td>
</tr>
</tbody>
</table>
<!-- <h3 style="font-size: 35px; font-weight:300; margin:20px 0px 15px 0px;">Totals</h3> -->
<table class="new-table" style="width: 100%;">
<tbody>
<!-- <tr>
<td style="font-size: 16px; color:#000000; font-weight:500;">VAT</td>
<td id="VATTotal">0.00</td>
</tr> -->
<tr>
<td style="font-size: 16px; color:#000000; font-weight:500; width: 80%;">
<div style="display:flex; gap:20px; flex-wrap:wrap;">
<div class="form-check" style="border: 1px solid #d2d4de; border-radius: 3px; padding: 8px 6px;">
<label class="form-check-label" for="SwitchPlan1" style="color: rgba(78, 85, 101, 1);font-size: 15px;font-weight: 700; margin-bottom:0px;">
USD
</label>
<input class="form-check-input" id="SwitchPlan1" onclick="switchPlan1()" type="radio" name="flexRadioDefault" checked />
</div>
<div class="form-check" style="border: 1px solid #d2d4de; border-radius: 3px; padding: 8px 6px;" id="displayNone">
<label class="form-check-label" for="SwitchPlan2" id="SwitchPlan4" style="color: rgba(78, 85, 101, 1);font-size: 15px;font-weight: 700; margin-bottom:0px;">
</label>
<input class="form-check-input" id="SwitchPlan2" onclick="switchPlan2()" type="radio" name="flexRadioDefault" />
</div>
</div>
</td>
<td width="20%">
<table style="width: 100%;">
<tr>
<td style=" font-size: 15px; color:#4E5565; font-weight:400; text-align:center">VAT </td>
<td style=" font-size: 15px; color:rgba(78, 85, 101, 1); font-weight:600; text-align:right" id="VATTotal">0.00</td>
</tr>
<tr>
<td style=" font-size: 15px; color:#4E5565; font-weight:400; text-align:center">Total </td>
<td style=" font-size: 15px; color:rgba(78, 85, 101, 1); font-weight:600; text-align:right" id="totalToday">00.0 </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- <button id="SwitchPlan" onclick="switchPlan()" class="btn">Use Local Currency</button> -->
<div style="display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px;">
<button id="paymentButton" class="btn" style="width:100%; background: rgb(151,189,92); background: linear-gradient(90deg, #94C048 0%, #64B05C 100%); border:none; color:#ffffff; font-weight:500;" data-success-url='https://paddle.com/thankyou'>Pay</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script>
let userCountryCode ="";
const urlParams = new URLSearchParams(window.location.search);
let orgid = urlParams.get('orgid') ?? '';
let orgname = urlParams.get('orgname') ?? '';
let priceId = urlParams.get('priceId');
let priceIdUSD = urlParams.get('priceIdUSD');
let itemsList = [{
priceId: priceId,
quantity: 1
}, ];
let itemsListUSD = [{
priceId: priceIdUSD,
quantity: 1
}, ];
let activeItem = itemsListUSD;
let isRegular = true;
// define items
// define items
// define customer details
let customerInfo = {
email: "",
address: {
},
business: {
}
}
let customData = {
orgname: orgname,
orgId: orgid
}
document.getElementById("companyName").value = orgname;
document.getElementById("orgid").value = orgid;
if (!!orgid)
{
document.getElementById("orgid").disabled = true;
}
// function switchPlan() {
// isRegular = !isRegular;
// activeItem = isRegular ? itemsListUSD : itemsList;
// if (isRegular)
// {
// document.getElementById('SwitchPlan').textContent = "Use Local Currency";
// }
// else
// {
// document.getElementById('SwitchPlan').textContent = "Use USD";
// }
// updatePreview(activeItem);
// }
function switchPlan1() {
isRegular = !isRegular;
activeItem = isRegular ? itemsListUSD : itemsListUSD;
if (isRegular)
{
document.getElementById('SwitchPlan1').textContent = "Use Local Currency";
}
else
{
document.getElementById('SwitchPlan1').textContent = "Use USD";
}
updatePreview(activeItem);
}
function switchPlan2() {
isRegular = !isRegular;
activeItem = isRegular ? itemsList : itemsList;
if (isRegular)
{
document.getElementById('SwitchPlan2').textContent = "Use Local Currency";
}
else
{
document.getElementById('SwitchPlan2').textContent = "Use USD";
}
updatePreview(activeItem);
}
function updatePreview() {
CallPerview();
}
function CallPerview()
{
let request = {
items: activeItem,
// customerIpAddress: userCountryCode === "" ? undefined : userCountryCode,
address: {
countryCode: userCountryCode === "" ? "US" : userCountryCode
}
}
Paddle.PricePreview(request).then(updateTable);
}
// open checkout
function openPreview(items, customer, customData) {
updatePreview();
document.getElementById('paymentButton').addEventListener('click', function() {
openCheckout(activeItem, customerInfo, customData);
});
}
function openCheckout() {
Paddle.Checkout.open({
items: activeItem,
customData: customData,
customer: customerInfo,
successCallback: function(data) {
// Redirect to thank you page after successful payment
window.location.href = "http://dev.cccinfotech.com/dooblo/paddle-pay-thank-you/";
},
});
}
function updateCustomerInfo() {
customerInfo.name = document.getElementById("WholeName").value;
customerInfo.email = document.getElementById("companyEmail").value;
customerInfo.address.firstLine = document.getElementById("companyAddress").value;
customerInfo.address.city = document.getElementById("cityAddress").value;
customerInfo.address.postalCode = document.getElementById("zipAddress").value;
customerInfo.address.countryCode = document.getElementById('country').value;
customerInfo.address.region = document.getElementById('state').value;
userCountryCode = customerInfo.address.countryCode;
customerInfo.business.name = document.getElementById("companyName").value;
customData.companyName = document.getElementById("companyName").value;
customData.orgId = document.getElementById("orgid").value;
customData.name = document.getElementById("WholeName").value;
customData.billingEmail = document.getElementById("companyEmail").value;
customData.phone = document.getElementById("companyPhone").value;
customData.address = document.getElementById("companyAddress").value;
customData.city = document.getElementById("cityAddress").value;
customData.postalCode = document.getElementById("zipAddress").value;
customData.countryCode = document.getElementById('country').value;
customData.region = document.getElementById('state').value;
}
//Diable everything
//document.querySelector('.paddle-frame').style.pointerEvents = 'none';
document.getElementById("companyForm").addEventListener("input", updateCustomerInfo);
function updateTable(event) {
console.log(event);
let items = event.data.details.lineItems;
let firstItem = event.data.details.lineItems[0];
//let recurringTotals = event.data.recurring_totals;
updateItemsTable(items,event.data.currencyCode);
updateSummaryTable(firstItem.formattedTotals.total,firstItem.formattedTotals.tax, event.data.currencyCode);
}
function updateItemsTable(items, currencyCode) {
const itemsTableBody = document.querySelector('.items-table tbody');
itemsTableBody.innerHTML = '';
let totalPrice = 0;
items.forEach(item => {
const newRow = createTableRow(item.product.name, item.quantity, item.formattedTotals.subtotal, currencyCode);
itemsTableBody.appendChild(newRow);
});
}
function createTableRow(productName, quantity, total, currencyCode) {
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${productName}</td>
<td>${quantity}</td>
<td>${total} ${currencyCode}</td>
`;
return newRow;
}
function updateSummaryTable(totals,tax, currencyCode,vat) {
// document.getElementById('oneTimeTotal').textContent = (totals.subtotal - recurringTotals.subtotal).toFixed(2);
// document.getElementById('recurringTotal').textContent = recurringTotals.subtotal.toFixed(2);
//document.getElementById('discountTotal').textContent = totals.discount.toFixed(2) + ' ' + currencyCode;
document.getElementById('VATTotal').textContent = tax + ' ' + currencyCode;
document.getElementById('totalToday').textContent = totals + ' ' + currencyCode;
}
Paddle.Environment.set("production");
Paddle.Initialize({
token: "live_4df8660e0ac9c1951ebf7eb479a", // replace with a client-side token
checkout: {
settings: {
// displayMode: "inline",
// frameTarget: "checkout-container",
// frameInitialHeight: "450",
// frameStyle: "width: 100%; min-width: 280px;",
allowLogout: false,
variant: "one-page",
showAddDiscounts: false
}
},
});
function validateForm() {
let isValid = true;
// Get the input values
const companyName = document.getElementById('companyName').value.trim();
const WholeName = document.getElementById('WholeName').value.trim();
const companyEmail = document.getElementById('companyEmail').value.trim();
const companyPhone = document.getElementById('companyPhone').value.trim();
const companyAddress = document.getElementById('companyAddress').value.trim();
const zipAddress = document.getElementById('zipAddress').value.trim();
const country = document.getElementById('country').value;
// Regular expression for email validation
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phonePattern = /^\+?[0-9\s\-().]{7,20}$/;
const zipPatterns = {
'AU': /^\d{4}$/,
'CA': /^[A-Za-z]\d[A-Za-z][ ]?\d[A-Za-z]\d$/,
'FR': /^\d{5}$/,
'DE': /^\d{5}$/,
'IN': /^\d{6}$/,
'IT': /^\d{5}$/,
'NL': /^\d{4}[ ]?[A-Za-z]{2}$/,
'ES': /^\d{5}$/,
'GB': /^([A-Za-z]{1,2}\d[A-Za-z\d]?\s?\d[A-Za-z]{2})$/,
'US': /^\d{5}(-\d{4})?$/
};
// Use the country-specific pattern or default pattern
let zipPattern = zipPatterns[country];
if (!zipPattern) {
// Default pattern if no specific pattern is defined
zipPattern = /^[A-Za-z0-9\s\-]{3,10}$/;
}
// Validate Company Name
if (companyName === '') {
// document.getElementById('companyNameError').style.display = 'block';
isValid = false;
} else {
// document.getElementById('companyNameError').style.display = 'none';
}
// Validate Name
if (WholeName === '') {
// document.getElementById('WholeNameError').style.display = 'block';
isValid = false;
} else {
// document.getElementById('WholeNameError').style.display = 'none';
}
// Validate Country
// document.getElementById('SwitchPlan').disabled = true;
document.getElementById('SwitchPlan1').disabled = true;
document.getElementById('SwitchPlan1').checked = true;
document.getElementById('SwitchPlan2').disabled = true;
document.getElementById('displayNone').style.display = 'none';
document.getElementById('paymentButton').disabled = true;
if (country === '') {
isValid = false;
} else {
const currency = countryCurrency.countries[country];
// if (currency) document.getElementById('SwitchPlan').disabled = false;
document.getElementById('SwitchPlan4').textContent = currency;
switchPlan1();
// alert(currency);
if (!currency) document.getElementById('SwitchPlan1').checked = true;
document.getElementById('SwitchPlan4').textContent = currency;
if (currency) document.getElementById('SwitchPlan1').disabled = false;
if (currency) document.getElementById('SwitchPlan2').disabled = false;
if(currency) document.getElementById('displayNone').style.display = 'Block';
if (!currency) document.getElementById('displayNone').style.display = 'none';
if (currency) document.getElementById('paymentButton').disabled = false;
}
// Validate Company Email
document.getElementById('companyEmailError').style.display = 'none';
if (companyEmail === '' || !emailPattern.test(companyEmail)) {
if (companyEmail !== '') document.getElementById('companyEmailError').style.display = 'block';
isValid = false;
}
// Validate Phone
document.getElementById('companyPhoneError').style.display = 'none';
if (companyPhone === '' || !phonePattern.test(companyPhone)) {
// Field is not empty and pattern doesn't match, show error
if (companyPhone !== '') document.getElementById('companyPhoneError').style.display = 'block';
isValid = false;
}
// Validate Address
if (companyAddress === '') {
// document.getElementById('companyAddressError').style.display = 'block';
isValid = false;
} else {
// document.getElementById('companyAddressError').style.display = 'none';
}
// Validate zipaddess
document.getElementById('zipAddressError').style.display = 'none';
if (zipAddress === "" || !zipPattern.test(zipAddress)) {
if (zipAddress !== '') document.getElementById('zipAddressError').style.display = 'block';
isValid = false;
}
// Enable or disable the payment button based on validation
document.getElementById('paymentButton').disabled = !isValid;
}
// Attach event listeners to input fields for real-time validation
document.getElementById('companyName').addEventListener('input', validateForm);
document.getElementById('WholeName').addEventListener('input', validateForm);
document.getElementById('companyEmail').addEventListener('input', validateForm);
document.getElementById('companyPhone').addEventListener('input', validateForm);
document.getElementById('companyAddress').addEventListener('input', validateForm);
document.getElementById('zipAddress').addEventListener('input', validateForm);
document.getElementById('country').addEventListener('change', function() { validateForm(); updatePreview(); } );
const countryData = {
"data": [
{
"name": "\u00c5land Islands",
"code": "AX",
"required_address_information": []
},
{
"name": "Albania",
"code": "AL",
"required_address_information": []
},
{
"name": "Algeria",
"code": "DZ",
"required_address_information": []
},
{
"name": "American Samoa",
"code": "AS",
"required_address_information": []
},
{
"name": "Andorra",
"code": "AD",
"required_address_information": []
},
{
"name": "Angola",
"code": "AO",
"required_address_information": []
},
{
"name": "Anguilla",
"code": "AI",
"required_address_information": []
},
{
"name": "Antigua and Barbuda",
"code": "AG",
"required_address_information": []
},
{
"name": "Argentina",
"code": "AR",
"required_address_information": []
},
{
"name": "Armenia",
"code": "AM",
"required_address_information": []
},
{
"name": "Aruba",
"code": "AW",
"required_address_information": []
},
{
"name": "Australia",
"code": "AU",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "Austria",
"code": "AT",
"required_address_information": []
},
{
"name": "Azerbaijan",
"code": "AZ",
"required_address_information": []
},
{
"name": "Bahamas",
"code": "BS",
"required_address_information": []
},
{
"name": "Bahrain",
"code": "BH",
"required_address_information": []
},
{
"name": "Bangladesh",
"code": "BD",
"required_address_information": []
},
{
"name": "Barbados",
"code": "BB",
"required_address_information": []
},
{
"name": "Belgium",
"code": "BE",
"required_address_information": []
},
{
"name": "Belize",
"code": "BZ",
"required_address_information": []
},
{
"name": "Benin",
"code": "BJ",
"required_address_information": []
},
{
"name": "Bermuda",
"code": "BM",
"required_address_information": []
},
{
"name": "Bhutan",
"code": "BT",
"required_address_information": []
},
{
"name": "Bolivia",
"code": "BO",
"required_address_information": []
},
{
"name": "Bosnia and Herzegovina",
"code": "BA",
"required_address_information": []
},
{
"name": "Botswana",
"code": "BW",
"required_address_information": []
},
{
"name": "Bouvet Island",
"code": "BV",
"required_address_information": []
},
{
"name": "Brazil",
"code": "BR",
"required_address_information": []
},
{
"name": "British Indian Ocean Territory",
"code": "IO",
"required_address_information": []
},
{
"name": "British Virgin Islands",
"code": "VG",
"required_address_information": []
},
{
"name": "Brunei",
"code": "BN",
"required_address_information": []
},
{
"name": "Bulgaria",
"code": "BG",
"required_address_information": []
},
{
"name": "Burkina Faso",
"code": "BF",
"required_address_information": []
},
{
"name": "Burundi",
"code": "BI",
"required_address_information": []
},
{
"name": "Cambodia",
"code": "KH",
"required_address_information": []
},
{
"name": "Cameroon",
"code": "CM",
"required_address_information": []
},
{
"name": "Canada",
"code": "CA",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "Cape Verde",
"code": "CV",
"required_address_information": []
},
{
"name": "Caribbean Netherlands (Bonaire, Sint Eustatius, and Saba)",
"code": "BQ",
"required_address_information": []
},
{
"name": "Cayman Islands",
"code": "KY",
"required_address_information": []
},
{
"name": "Chad",
"code": "TD",
"required_address_information": []
},
{
"name": "Chile",
"code": "CL",
"required_address_information": []
},
{
"name": "China",
"code": "CN",
"required_address_information": []
},
{
"name": "Christmas Island",
"code": "CX",
"required_address_information": []
},
{
"name": "Cocos Islands",
"code": "CC",
"required_address_information": []
},
{
"name": "Colombia",
"code": "CO",
"required_address_information": []
},
{
"name": "Comoros",
"code": "KM",
"required_address_information": []
},
{
"name": "Cook Islands",
"code": "CK",
"required_address_information": []
},
{
"name": "Costa Rica",
"code": "CR",
"required_address_information": []
},
{
"name": "Croatia",
"code": "HR",
"required_address_information": []
},
{
"name": "Cura\u00e7ao",
"code": "CW",
"required_address_information": []
},
{
"name": "Cyprus",
"code": "CY",
"required_address_information": []
},
{
"name": "Czechia (Czech Republic)",
"code": "CZ",
"required_address_information": []
},
{
"name": "C\u00f4te d'Ivoire (Ivory Coast)",
"code": "CI",
"required_address_information": []
},
{
"name": "Denmark",
"code": "DK",
"required_address_information": []
},
{
"name": "Djibouti",
"code": "DJ",
"required_address_information": []
},
{
"name": "Dominica",
"code": "DM",
"required_address_information": []
},
{
"name": "Dominican Republic",
"code": "DO",
"required_address_information": []
},
{
"name": "Ecuador",
"code": "EC",
"required_address_information": []
},
{
"name": "Egypt",
"code": "EG",
"required_address_information": []
},
{
"name": "El Salvador",
"code": "SV",
"required_address_information": []
},
{
"name": "Equatorial Guinea",
"code": "GQ",
"required_address_information": []
},
{
"name": "Eritrea",
"code": "ER",
"required_address_information": []
},
{
"name": "Estonia",
"code": "EE",
"required_address_information": []
},
{
"name": "Ethiopia",
"code": "ET",
"required_address_information": []
},
{
"name": "Falkland Islands",
"code": "FK",
"required_address_information": []
},
{
"name": "Faroe Islands",
"code": "FO",
"required_address_information": []
},
{
"name": "Fiji",
"code": "FJ",
"required_address_information": []
},
{
"name": "Finland",
"code": "FI",
"required_address_information": []
},
{
"name": "France",
"code": "FR",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "French Guiana",
"code": "GF",
"required_address_information": []
},
{
"name": "French Polynesia",
"code": "PF",
"required_address_information": []
},
{
"name": "French Southern and Antarctic Lands",
"code": "TF",
"required_address_information": []
},
{
"name": "Gabon",
"code": "GA",
"required_address_information": []
},
{
"name": "Gambia",
"code": "GM",
"required_address_information": []
},
{
"name": "Georgia",
"code": "GE",
"required_address_information": []
},
{
"name": "Germany",
"code": "DE",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "Ghana",
"code": "GH",
"required_address_information": []
},
{
"name": "Gibraltar",
"code": "GI",
"required_address_information": []
},
{
"name": "Greece",
"code": "GR",
"required_address_information": []
},
{
"name": "Greenland",
"code": "GL",
"required_address_information": []
},
{
"name": "Grenada",
"code": "GD",
"required_address_information": []
},
{
"name": "Guadeloupe",
"code": "GP",
"required_address_information": []
},
{
"name": "Guam",
"code": "GU",
"required_address_information": []
},
{
"name": "Guatemala",
"code": "GT",
"required_address_information": []
},
{
"name": "Guernsey",
"code": "GG",
"required_address_information": []
},
{
"name": "Guinea",
"code": "GN",
"required_address_information": []
},
{
"name": "Guinea-Bissau",
"code": "GW",
"required_address_information": []
},
{
"name": "Guyana",
"code": "GY",
"required_address_information": []
},
{
"name": "Heard Island and McDonald Islands",
"code": "HM",
"required_address_information": []
},
{
"name": "Holy See (Vatican City)",
"code": "VA",
"required_address_information": []
},
{
"name": "Honduras",
"code": "HN",
"required_address_information": []
},
{
"name": "Hong Kong",
"code": "HK",
"required_address_information": []
},
{
"name": "Hungary",
"code": "HU",
"required_address_information": []
},
{
"name": "Iceland",
"code": "IS",
"required_address_information": []
},
{
"name": "India",
"code": "IN",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "Indonesia",
"code": "ID",
"required_address_information": []
},
{
"name": "Iraq",
"code": "IQ",
"required_address_information": []
},
{
"name": "Ireland",
"code": "IE",
"required_address_information": []
},
{
"name": "Isle of Man",
"code": "IM",
"required_address_information": []
},
{
"name": "Israel",
"code": "IL",
"required_address_information": []
},
{
"name": "Italy",
"code": "IT",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "Jamaica",
"code": "JM",
"required_address_information": []
},
{
"name": "Japan",
"code": "JP",
"required_address_information": []
},
{
"name": "Jersey",
"code": "JE",
"required_address_information": []
},
{
"name": "Jordan",
"code": "JO",
"required_address_information": []
},
{
"name": "Kazakhstan",
"code": "KZ",
"required_address_information": []
},
{
"name": "Kenya",
"code": "KE",
"required_address_information": []
},
{
"name": "Kiribati",
"code": "KI",
"required_address_information": []
},
{
"name": "Kosovo",
"code": "XK",
"required_address_information": []
},
{
"name": "Kuwait",
"code": "KW",
"required_address_information": []
},
{
"name": "Kyrgyzstan",
"code": "KG",
"required_address_information": []
},
{
"name": "Lao People's Democratic Republic (Laos)",
"code": "LA",
"required_address_information": []
},
{
"name": "Latvia",
"code": "LV",
"required_address_information": []
},
{
"name": "Lebanon",
"code": "LB",
"required_address_information": []
},
{
"name": "Lesotho",
"code": "LS",
"required_address_information": []
},
{
"name": "Liberia",
"code": "LR",
"required_address_information": []
},
{
"name": "Liechtenstein",
"code": "LI",
"required_address_information": []
},
{
"name": "Lithuania",
"code": "LT",
"required_address_information": []
},
{
"name": "Luxembourg",
"code": "LU",
"required_address_information": []
},
{
"name": "Macao",
"code": "MO",
"required_address_information": []
},
{
"name": "Macedonia",
"code": "MK",
"required_address_information": []
},
{
"name": "Madagascar",
"code": "MG",
"required_address_information": []
},
{
"name": "Malawi",
"code": "MW",
"required_address_information": []
},
{
"name": "Malaysia",
"code": "MY",
"required_address_information": []
},
{
"name": "Maldives",
"code": "MV",
"required_address_information": []
},
{
"name": "Malta",
"code": "MT",
"required_address_information": []
},
{
"name": "Marshall Islands",
"code": "MH",
"required_address_information": []
},
{
"name": "Martinique",
"code": "MQ",
"required_address_information": []
},
{
"name": "Mauritania",
"code": "MR",
"required_address_information": []
},
{
"name": "Mauritius",
"code": "MU",
"required_address_information": []
},
{
"name": "Mayotte",
"code": "YT",
"required_address_information": []
},
{
"name": "Mexico",
"code": "MX",
"required_address_information": []
},
{
"name": "Micronesia",
"code": "FM",
"required_address_information": []
},
{
"name": "Moldova",
"code": "MD",
"required_address_information": []
},
{
"name": "Monaco",
"code": "MC",
"required_address_information": []
},
{
"name": "Mongolia",
"code": "MN",
"required_address_information": []
},
{
"name": "Montenegro",
"code": "ME",
"required_address_information": []
},
{
"name": "Montserrat",
"code": "MS",
"required_address_information": []
},
{
"name": "Morocco",
"code": "MA",
"required_address_information": []
},
{
"name": "Mozambique",
"code": "MZ",
"required_address_information": []
},
{
"name": "Namibia",
"code": "NA",
"required_address_information": []
},
{
"name": "Nauru",
"code": "NR",
"required_address_information": []
},
{
"name": "Nepal",
"code": "NP",
"required_address_information": []
},
{
"name": "Netherlands",
"code": "NL",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "New Caledonia",
"code": "NC",
"required_address_information": []
},
{
"name": "New Zealand",
"code": "NZ",
"required_address_information": []
},
{
"name": "Niger",
"code": "NE",
"required_address_information": []
},
{
"name": "Nigeria",
"code": "NG",
"required_address_information": []
},
{
"name": "Niue",
"code": "NU",
"required_address_information": []
},
{
"name": "Norfolk Island",
"code": "NF",
"required_address_information": []
},
{
"name": "Northern Mariana Islands",
"code": "MP",
"required_address_information": []
},
{
"name": "Norway",
"code": "NO",
"required_address_information": []
},
{
"name": "Oman",
"code": "OM",
"required_address_information": []
},
{
"name": "Pakistan",
"code": "PK",
"required_address_information": []
},
{
"name": "Palau",
"code": "PW",
"required_address_information": []
},
{
"name": "Palestinian territories",
"code": "PS",
"required_address_information": []
},
{
"name": "Panama",
"code": "PA",
"required_address_information": []
},
{
"name": "Papua New Guinea",
"code": "PG",
"required_address_information": []
},
{
"name": "Paraguay",
"code": "PY",
"required_address_information": []
},
{
"name": "Peru",
"code": "PE",
"required_address_information": []
},
{
"name": "Philippines",
"code": "PH",
"required_address_information": []
},
{
"name": "Pitcairn",
"code": "PN",
"required_address_information": []
},
{
"name": "Poland",
"code": "PL",
"required_address_information": []
},
{
"name": "Portugal",
"code": "PT",
"required_address_information": []
},
{
"name": "Puerto Rico",
"code": "PR",
"required_address_information": []
},
{
"name": "Qatar",
"code": "QA",
"required_address_information": []
},
{
"name": "Republic of Congo",
"code": "CG",
"required_address_information": []
},
{
"name": "Republic of Serbia",
"code": "RS",
"required_address_information": []
},
{
"name": "Reunion",
"code": "RE",
"required_address_information": []
},
{
"name": "Romania",
"code": "RO",
"required_address_information": []
},
{
"name": "Rwanda",
"code": "RW",
"required_address_information": []
},
{
"name": "Saint Barth\u00e9lemy",
"code": "BL",
"required_address_information": []
},
{
"name": "Saint Helena",
"code": "SH",
"required_address_information": []
},
{
"name": "Saint Kitts and Nevis",
"code": "KN",
"required_address_information": []
},
{
"name": "Saint Lucia",
"code": "LC",
"required_address_information": []
},
{
"name": "Saint Martin",
"code": "MF",
"required_address_information": []
},
{
"name": "Saint Pierre and Miquelon",
"code": "PM",
"required_address_information": []
},
{
"name": "Saint Vincent and the Grenadines",
"code": "VC",
"required_address_information": []
},
{
"name": "Samoa",
"code": "WS",
"required_address_information": []
},
{
"name": "San Marino",
"code": "SM",
"required_address_information": []
},
{
"name": "Saudi Arabia",
"code": "SA",
"required_address_information": []
},
{
"name": "Senegal",
"code": "SN",
"required_address_information": []
},
{
"name": "Seychelles",
"code": "SC",
"required_address_information": []
},
{
"name": "Sierra Leone",
"code": "SL",
"required_address_information": []
},
{
"name": "Singapore",
"code": "SG",
"required_address_information": []
},
{
"name": "Sint Maarten",
"code": "SX",
"required_address_information": []
},
{
"name": "Slovakia",
"code": "SK",
"required_address_information": []
},
{
"name": "Slovenia",
"code": "SI",
"required_address_information": []
},
{
"name": "Solomon Islands",
"code": "SB",
"required_address_information": []
},
{
"name": "South Africa",
"code": "ZA",
"required_address_information": []
},
{
"name": "South Georgia and the South Sandwich Islands",
"code": "GS",
"required_address_information": []
},
{
"name": "South Korea",
"code": "KR",
"required_address_information": []
},
{
"name": "Spain",
"code": "ES",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "Sri Lanka",
"code": "LK",
"required_address_information": []
},
{
"name": "Suriname",
"code": "SR",
"required_address_information": []
},
{
"name": "Svalbard and Jan Mayen",
"code": "SJ",
"required_address_information": []
},
{
"name": "Swaziland",
"code": "SZ",
"required_address_information": []
},
{
"name": "Sweden",
"code": "SE",
"required_address_information": []
},
{
"name": "Switzerland",
"code": "CH",
"required_address_information": []
},
{
"name": "S\u00e3o Tom\u00e9 and Pr\u00edncipe",
"code": "ST",
"required_address_information": []
},
{
"name": "Taiwan",
"code": "TW",
"required_address_information": []
},
{
"name": "Tajikistan",
"code": "TJ",
"required_address_information": []
},
{
"name": "Tanzania",
"code": "TZ",
"required_address_information": []
},
{
"name": "Thailand",
"code": "TH",
"required_address_information": []
},
{
"name": "Timor-Leste",
"code": "TL",
"required_address_information": []
},
{
"name": "Togo",
"code": "TG",
"required_address_information": []
},
{
"name": "Tokelau",
"code": "TK",
"required_address_information": []
},
{
"name": "Tonga",
"code": "TO",
"required_address_information": []
},
{
"name": "Trinidad and Tobago",
"code": "TT",
"required_address_information": []
},
{
"name": "Tunisia",
"code": "TN",
"required_address_information": []
},
{
"name": "Turkey",
"code": "TR",
"required_address_information": []
},
{
"name": "Turkmenistan",
"code": "TM",
"required_address_information": []
},
{
"name": "Turks and Caicos Islands",
"code": "TC",
"required_address_information": []
},
{
"name": "Tuvalu",
"code": "TV",
"required_address_information": []
},
{
"name": "U.S. Virgin Islands",
"code": "VI",
"required_address_information": []
},
{
"name": "Uganda",
"code": "UG",
"required_address_information": []
},
{
"name": "Ukraine",
"code": "UA",
"required_address_information": []
},
{
"name": "United Arab Emirates",
"code": "AE",
"required_address_information": [
"Region"
]
},
{
"name": "United Kingdom",
"code": "GB",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "United States",
"code": "US",
"required_address_information": [
"ZIP/postal code"
]
},
{
"name": "United States Minor Outlying Islands",
"code": "UM",
"required_address_information": []
},
{
"name": "Uruguay",
"code": "UY",
"required_address_information": []
},
{
"name": "Uzbekistan",
"code": "UZ",
"required_address_information": []
},
{
"name": "Vanuatu",
"code": "VU",
"required_address_information": []
},
{
"name": "Vietnam",
"code": "VN",
"required_address_information": []
},
{
"name": "Wallis and Futuna",
"code": "WF",
"required_address_information": []
},
{
"name": "Western Sahara",
"code": "EH",
"required_address_information": []
},
{
"name": "Zambia",
"code": "ZM",
"required_address_information": []
}
]
};
var countryCurrency = {
"countries": {
"FK": ["GBP"],
"GB": ["GBP"],
"GI": ["GBP"],
"SH": ["GBP"],
"GG": ["GBP"],
"JE": ["GBP"],
"IM": ["GBP"],
"IO": ["GBP"],
"GS": ["GBP"],
"AT": ["EUR"],
"BE": ["EUR"],
"BG": ["EUR"],
"CY": ["EUR"],
"DE": ["EUR"],
"EE": ["EUR"],
"ES": ["EUR"],
"FI": ["EUR"],
"FR": ["EUR"],
"GF": ["EUR"],
"GL": ["EUR"],
"GR": ["EUR"],
"HR": ["EUR"],
"IE": ["EUR"],
"IS": ["EUR"],
"IT": ["EUR"],
"AD": ["EUR"],
"GP": ["EUR"],
"LT": ["EUR"],
"LU": ["EUR"],
"LV": ["EUR"],
"MC": ["EUR"],
"MQ": ["EUR"],
"MT": ["EUR"],
"NL": ["EUR"],
"PF": ["EUR"],
"PT": ["EUR"],
"RE": ["EUR"],
"RO": ["EUR"],
"SI": ["EUR"],
"SK": ["EUR"],
"SM": ["EUR"],
"UY": ["EUR"],
"VA": ["EUR"],
"TF": ["EUR"],
"PM": ["EUR"],
"AX": ["EUR"],
"XK": ["EUR"],
"BL": ["EUR"],
"SX": ["EUR"],
"YT": ["EUR"],
"ME": ["EUR"],
"MF": ["EUR"],
"RU": ["RUB"],
"AU": ["AUD"],
"KI": ["AUD"],
"CC": ["AUD"],
"NF": ["AUD"],
"NR": ["AUD"],
"TV": ["AUD"],
"CX": ["AUD"],
"HM": ["AUD"],
"BR": ["BRL"],
"CA": ["CAD"],
"CH": ["CHF"],
"LI": ["CHF"],
"CN": ["CNY"],
"PL": ["PLN"],
"SE": ["SEK"],
"ZA": ["ZAR"],
"CZ": ["CZK"],
"HU": ["HUF"],
"DK": ["DKK"],
"FO": ["DKK"],
"CK": ["NZD"],
"NZ": ["NZD"],
"NU": ["NZD"],
"PN": ["NZD"],
"TK": ["NZD"],
"SG": ["SGD"],
"HK": ["HKD"],
"IN": ["INR"],
"JP": ["JPY"],
"KR": ["KRW"],
"MX": ["MXN"],
"AR": ["ARS"],
"TW": ["TWD"],
"BV": ["NOK"],
"NO": ["NOK"],
"SJ": ["NOK"],
"TH": ["THB"],
"TR": ["TRY"],
"IL": ["ILS"],
"PS": ["ILS"],
"UA": ["UAH"],
"CO": ["COP"],
"VN": ["VND"]
}
};
const stateData = [
// United States States & Territories
{ "name": "Alabama", "code": "AL", "country_code": "US" },
{ "name": "Alaska", "code": "AK", "country_code": "US" },
{ "name": "Arizona", "code": "AZ", "country_code": "US" },
{ "name": "Arkansas", "code": "AR", "country_code": "US" },
{ "name": "California", "code": "CA", "country_code": "US" },
{ "name": "Colorado", "code": "CO", "country_code": "US" },
{ "name": "Connecticut", "code": "CT", "country_code": "US" },
{ "name": "Delaware", "code": "DE", "country_code": "US" },
{ "name": "Florida", "code": "FL", "country_code": "US" },
{ "name": "Georgia", "code": "GA", "country_code": "US" },
{ "name": "Hawaii", "code": "HI", "country_code": "US" },
{ "name": "Idaho", "code": "ID", "country_code": "US" },
{ "name": "Illinois", "code": "IL", "country_code": "US" },
{ "name": "Indiana", "code": "IN", "country_code": "US" },
{ "name": "Iowa", "code": "IA", "country_code": "US" },
{ "name": "Kansas", "code": "KS", "country_code": "US" },
{ "name": "Kentucky", "code": "KY", "country_code": "US" },
{ "name": "Louisiana", "code": "LA", "country_code": "US" },
{ "name": "Maine", "code": "ME", "country_code": "US" },
{ "name": "Maryland", "code": "MD", "country_code": "US" },
{ "name": "Massachusetts", "code": "MA", "country_code": "US" },
{ "name": "Michigan", "code": "MI", "country_code": "US" },
{ "name": "Minnesota", "code": "MN", "country_code": "US" },
{ "name": "Mississippi", "code": "MS", "country_code": "US" },
{ "name": "Missouri", "code": "MO", "country_code": "US" },
{ "name": "Montana", "code": "MT", "country_code": "US" },
{ "name": "Nebraska", "code": "NE", "country_code": "US" },
{ "name": "Nevada", "code": "NV", "country_code": "US" },
{ "name": "New Hampshire", "code": "NH", "country_code": "US" },
{ "name": "New Jersey", "code": "NJ", "country_code": "US" },
{ "name": "New Mexico", "code": "NM", "country_code": "US" },
{ "name": "New York", "code": "NY", "country_code": "US" },
{ "name": "North Carolina", "code": "NC", "country_code": "US" },
{ "name": "North Dakota", "code": "ND", "country_code": "US" },
{ "name": "Ohio", "code": "OH", "country_code": "US" },
{ "name": "Oklahoma", "code": "OK", "country_code": "US" },
{ "name": "Oregon", "code": "OR", "country_code": "US" },
{ "name": "Pennsylvania", "code": "PA", "country_code": "US" },
{ "name": "Rhode Island", "code": "RI", "country_code": "US" },
{ "name": "South Carolina", "code": "SC", "country_code": "US" },
{ "name": "South Dakota", "code": "SD", "country_code": "US" },
{ "name": "Tennessee", "code": "TN", "country_code": "US" },
{ "name": "Texas", "code": "TX", "country_code": "US" },
{ "name": "Utah", "code": "UT", "country_code": "US" },
{ "name": "Vermont", "code": "VT", "country_code": "US" },
{ "name": "Virginia", "code": "VA", "country_code": "US" },
{ "name": "Washington", "code": "WA", "country_code": "US" },
{ "name": "West Virginia", "code": "WV", "country_code": "US" },
{ "name": "Wisconsin", "code": "WI", "country_code": "US" },
{ "name": "Wyoming", "code": "WY", "country_code": "US" },
{ "name": "District of Columbia", "code": "DC", "country_code": "US" },
{ "name": "American Samoa", "code": "AS", "country_code": "US" },
{ "name": "Guam", "code": "GU", "country_code": "US" },
{ "name": "Northern Mariana Islands", "code": "MP", "country_code": "US" },
{ "name": "Puerto Rico", "code": "PR", "country_code": "US" },
{ "name": "United States Minor Outlying Islands", "code": "UM", "country_code": "US" },
{ "name": "Virgin Islands, U.S.", "code": "VI", "country_code": "US" },
// Pakistan States
{ "name": "Abu Dhabi", "code": "AZ", "country_code": "AE" },
{ "name": "Dubai", "code": "DU", "country_code": "AE" },
{ "name": "Fujairah", "code": "FU", "country_code": "AE" },
{ "name": "Ras Al Khaimah", "code": "RK", "country_code": "AE" },
{ "name": "Sharjah", "code": "SH", "country_code": "AE" },
{ "name": "Umm Al Quwain", "code": "UQ", "country_code": "AE" },
{ "name": "Ajman", "code": "AJ", "country_code": "AE" }
]
// Function to populate the country chooser
function populateCountryChooser() {
const countrySelect = document.getElementById('country');
countryData.data.forEach(country => {
const option = document.createElement('option');
option.value = country.code;
option.textContent = country.name;
countrySelect.appendChild(option);
});
}
// Call the function to populate the country chooser when the page loads
window.onload = function() {
validateForm(); // Initial validation
openPreview();
populateCountryChooser();
populateStateChooser();
validateForm(); // Initial validation
};
// Event listener to handle country change
document.getElementById('country').addEventListener('change', function(event) {
const selectedCountry = event.target.value;
// alert(selectedCountry);
if(selectedCountry == 'US' || selectedCountry == 'AE'){
document.getElementById('stateDiv').style.display = 'block';
}else
{
document.getElementById('stateDiv').style.display = 'none';
}
let statesList = [];
if (selectedCountry === 'US' || selectedCountry === 'AE') {
statesList = stateData.filter(state => state.country_code === selectedCountry);
} else {
statesList = []; // Clear the list for other countries
}
console.log('Selected Country:', selectedCountry);
console.log('States List:', statesList); // Debugging line to check the states list
updateStateSelect(statesList);
});
// Function to update the state dropdown
function updateStateSelect(statesList) {
// Ensure statesList is an array before calling forEach
if (!Array.isArray(statesList)) {
console.error('Expected statesList to be an array, but received:', statesList);
return; // Exit if statesList is not an array
}
const stateSelect = document.getElementById('state');
stateSelect.innerHTML = ''; // Clear current options
// Add a default "Select State" option
const defaultOption = document.createElement('option');
defaultOption.text = 'Select a regions';
stateSelect.add(defaultOption);
// Add new state options based on selected country
statesList.forEach(state => {
const option = document.createElement('option');
option.value = state.name;
option.text = state.name;
stateSelect.add(option);
});
}
</script>
<?php get_footer(); ?>