upload state, country name

This commit is contained in:
Suvodip
2024-05-08 17:58:56 +05:30
parent 25df82ac8c
commit 72f4f36cb5

View File

@@ -93,15 +93,17 @@
<div class="grid grid-cols-3 p-3 border-b-2 border-[#D9D9D9] space-x-6" style="text-align: left;">
<div>
<p><b>Country</b></p>
<select class="w-full" name="country" id="country" onchange="fetchStates()" style="border: 1px solid #D9D9D9; border-radius: 5px; padding: 6px;">
<select class="w-full" name="" id="country" onchange="fetchStates()" style="border: 1px solid #D9D9D9; border-radius: 5px; padding: 6px;">
<option selected value="<?php echo $row['country']; ?>"><?php echo $row['country']; ?></option>
</select>
<input type="hidden" name="country" id="getCountryName">
</div>
<div>
<p><b>State</b></p>
<select class="w-full" name="state" id="state" onchange="fetchCities()" style="border: 1px solid #D9D9D9; border-radius: 5px; padding: 6px;">
<select class="w-full" name="" id="state" onchange="fetchCities()" style="border: 1px solid #D9D9D9; border-radius: 5px; padding: 6px;">
<option selected value="<?php echo $row['state']; ?>"><?php echo $row['state']; ?></option>
</select>
<input type="hidden" name="state" id="getStateName">
</div>
<div>
<p><b>City</b></p>
@@ -405,29 +407,19 @@
</div>
<script>
// Get all copy buttons
const copyButtons = document.querySelectorAll('.copy-btn');
// Attach click event listeners to each copy button
copyButtons.forEach(button => {
button.addEventListener('click', event => {
event.preventDefault(); // Prevent default button behavior
// Get the input ID associated with this button
event.preventDefault();
const inputId = button.getAttribute('data-input-id');
// Get the input element by ID
const inputElement = document.getElementById(inputId);
// Check if the input element exists and has a value
if (inputElement && inputElement.value) {
// Copy the input value to the clipboard using Clipboard API
navigator.clipboard.writeText(inputElement.value)
navigator.clipboard.writeText(inputElement.value)
.then(() => {
// Provide visual feedback to the user
button.classList.add('copied');
setTimeout(() => {
button.classList.remove('copied');
}, 1000); // Remove the 'copied' class after 2000ms
}, 1000);
})
.catch(err => {
console.error('Unable to copy:', err);
@@ -437,24 +429,30 @@ copyButtons.forEach(button => {
});
// Function to fetch countries and populate the country dropdown
function fetchCountries() {
fetch('https://api.siliconpin.com/v3/list/country/')
.then(res => res.json())
.then(data => {
const countryDropdown = document.getElementById('country');
countryDropdown.innerHTML = '<option value="">Select Country</option>';
data.forEach(country => {
const option = document.createElement('option');
option.value = country.iso2;
option.text = country.name;
countryDropdown.appendChild(option);
});
.then(res => res.json())
.then(data => {
const countryDropdown = document.getElementById('country');
countryDropdown.innerHTML = '<option value="">Select Country</option>';
data.forEach(country => {
const option = document.createElement('option');
option.value = country.iso2;
option.text = country.name;
countryDropdown.appendChild(option);
});
});
}
function myCountry() {
let getCountryNameFrom = document.getElementById('country');
let selectedOption = getCountryNameFrom.options[getCountryNameFrom.selectedIndex].text;
document.getElementById('getCountryName').value = selectedOption;
// console.log(selectedOption);
}
function fetchStates() {
myCountry();
const selectedCountry = document.getElementById('country').value;
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${selectedCountry}`)
.then(res => res.json())
@@ -469,8 +467,15 @@ copyButtons.forEach(button => {
});
});
}
function myState() {
let getCountryNameFrom = document.getElementById('state');
let selectedOption = getCountryNameFrom.options[getCountryNameFrom.selectedIndex].text;
document.getElementById('getStateName').value = selectedOption;
// console.log(selectedOption);
}
function fetchCities() {
myState();
const selectedCountry = document.getElementById('country').value;
const selectedState = document.getElementById('state').value;
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${selectedCountry}&state=${selectedState}`)
@@ -486,7 +491,7 @@ copyButtons.forEach(button => {
});
});
}
// fetchCountries();
fetchCountries();
let nameID = document.getElementById('name');
let addressID = document.getElementById('address');
let countryID = document.getElementById('country');