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