upload state, country name
This commit is contained in:
@@ -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');
|
||||||
|
|||||||
Reference in New Issue
Block a user