body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
display: block;
text-align: center;
margin-top: 20px;
}
.input-field {
width: 200px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px auto;
}
.add-button {
padding: 8px 20px;
background-color: #620c87;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#add-button {
padding: 8px 20px;
background-color: #620c87;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button.remove {
cursor:pointer;
color:blue;
}
#testo-select{
color: #620c87;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById('mainForm');
if (form) {
console.log('Elemento form:', form); // Verifica se restituisce correttamente l'elemento form
console.dir(form);
// Verifica se gli input possono essere selezionati correttamente
const inputs = form.querySelectorAll('input');
console.log('Input trovati:', inputs);
//const eventListener = form.addEventListener('submit', handleSubmit);
form.addEventListener('submit', handleSubmit);
console.log('handleSubmit trovato:', handleSubmit);
console.log(typeof handleSubmit);
} else {
console.error('Elemento form non trovato.');
}
function handleSubmit(event) {
event.preventDefault();
console.log('ciao');
const nome = document.getElementById('nome').value;
const cognome = document.getElementById('cognome').value;
console.log('Nome:', nome);
console.log('Cognome:', cognome);
if (form.checkValidity()) {
console.log('Form valido, procedi con l\'invio della richiesta');
//sendFormData();
} else {
console.log('Form non valido, gestisci l\'errore o visualizza messaggi di validazione');
}
}
function sendFormData() {/*
const form = document.getElementById('mainForm');
// Creare oggetti FormData separati
const formData1 = new FormData(form);
const formData2 = new FormData(form);
// Aggiungere i dati del modulo a entrambi gli oggetti FormData
const formElements = event.target.elements;
for (let element of formElements) {
if (element.name) {
formData1.append(element.name, element.value);
formData2.append(element.name, element.value);
}
}
// Aggiungere i file a formData2
for (let i = 0; i {
console.log(key + ': ' + value);
});
// Verifica i dati prima dell'invio
console.log('Dati dei file (formData2):');
formData2.forEach((value, key) => {
console.log(key + ': ' + value);
});
var nonce = document.getElementById('nonce').value;
// Inviare i dati del modulo a process-form.php
fetch("prova-dati-collab", {
method: 'POST',
body: formData1,
headers: {
'X-WP-Nonce': nonce}
})
/*.then(response => response.text())*/
.then(response => {
if(!response.ok){
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Risposta da prova-dati-collab:', data);
})
.catch(error => {
console.error('Errore:', error);
});
// Inviare i dati del modulo a upload-photos.php
fetch('prova-dati-collab', {
method: 'POST',
body: formData2,
headers: {
'X-WP-Nonce': nonce}
})
/*.then(response => response.text())*/
.then(response => {
if(!response.ok){
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Risposta da prova-dati-collab-foto:', data);
// Redirigere alla pagina di conferma
window.location.href = 'prova-dati-collab';
})
.catch(error => {
console.error('Errore:', error);
});
fetch('prova-dati-collabs', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Errore nella richiesta HTTP: ' + response.status);
}
return response.json();
})
.then(data => {
console.log('Risposta ricevuta:', data);
// Gestisci la risposta dal server
})
.catch(error => {
console.error('Errore durante la richiesta:', error);
// Gestisci gli errori di rete o del server
});
*/}
var counterFile = 0;
window.addFnFile = function () {
if (counterFile < 4) {
counterFile++;
var field_area = document.getElementById('inputFieldsFile');
var div = document.createElement("div");
var input = document.createElement("input");
input.id = 'foto' + fileCount;
input.name = 'foto' + fileCount;
input.type = "file";
input.accept = "image/png, image/gif, image/jpeg";
input.required="required";
div.appendChild(input);
field_area.appendChild(div);
//create the removal link
var removalLink = document.createElement('button');
removalLink.type = "button";
removalLink.id = "add-button";
removalLink.className = "remove";
removalLink.onclick = function () {
counterFile--;
if (counterFile = 4) {
document.getElementById("idFile").disabled = true;
}
}
}
let counter = 0;
function updateFileCount() {
document.getElementById('fileCount').value = counterFile;
}
function updateCosCount() {
document.getElementById('cosCount').value = counter;
}
function addFn() {
if (counter = 5) {
document.getElementById("id").disabled = true;
}
}
}
// Assegna gli event listeners dopo il caricamento del DOM
document.getElementById('id').addEventListener('click', addFn);
document.getElementById('idFile').addEventListener('click', addFnFile);
});
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
document.addEventListener("DOMContentLoaded", function () {
let provinceName = ''; // Variabile globale per il nome della provincia
let selectedComuneName = '';
let selectedProvinceSigla = ''; // Variabile globale per memorizzare la sigla della provincia selezionata
// Funzione per caricare le regioni
function loadRegions() {
fetch('https://axqvoqvbfjpaamphztgd.functions.supabase.co/regioni')
.then(response => {
if (!response.ok) {
throw new Error('Errore nel caricamento delle regioni');
}
return response.json();
})
.then(data => {
console.log('Regioni:', data); // Debug: Mostra i dati delle regioni
const regionSelect = document.getElementById('regioni');
data.forEach(regionName => {
const option = document.createElement('option');
option.value = regionName; // Valore è il nome della regione
option.textContent = regionName; // Testo è il nome della regione
regionSelect.appendChild(option);
});
regionSelect.disabled = false; // Abilita la select delle regioni
})
.catch(error => console.error('Errore nel caricamento delle regioni:', error));
}
// Event listener per la select delle province
document.getElementById('province').addEventListener('change', function () {
const selectedOption = this.options[this.selectedIndex]; // Ottieni l'opzione selezionata
const provinceName = selectedOption.textContent.split(' (')[0]; // Estrai il nome della provincia
const sigla = selectedOption.textContent.split('(')[1].split(')')[0];
console.log('Sigla della provincia:', sigla); // Stampa la sigla della provincia nella console
// Aggiorna la variabile globale
selectedProvinceSigla = sigla;
console.log('Provincia selezionata:', provinceName); // Stampa il nome della provincia nella console
document.getElementById('selectedProvincia').value = sigla;
document.getElementById('fileCount').value = fileCount;
// Esegui altre operazioni necessarie qui
// Esempio: chiamare la funzione per caricare i comuni della provincia selezionata
loadComuni(provinceName);
// Abilita/disabilita altre interfacce se necessario
});
// Funzione per caricare le province in base alla regione selezionata
function loadProvinces(regionName) {
fetch('https://axqvoqvbfjpaamphztgd.functions.supabase.co/province')
.then(response => {
if (!response.ok) {
throw new Error('Errore nel caricamento delle province');
}
return response.json();
})
.then(data => {
console.log('Province:', data); // Debug: Mostra i dati delle province
const provinceSelect = document.getElementById('province');
provinceSelect.innerHTML = ''; // Svuota le opzioni precedenti
// Aggiungi l'opzione "Seleziona una provincia"
const selectOption = document.createElement('option');
selectOption.value = '';
selectOption.textContent = 'Seleziona una provincia';
provinceSelect.appendChild(selectOption);
// Filtra le province per la regione selezionata
const filteredProvinces = data.filter(province => province.regione === regionName);
filteredProvinces.forEach(province => {
const option = document.createElement('option');
option.value = province.codice; // Assumiamo che "codice" sia l'ID della provincia
option.textContent = province.nome + ' (' + province.sigla + ')'; // Nome della provincia con sigla
provinceSelect.appendChild(option);
});
provinceSelect.disabled = false; // Abilita la select delle province
})
.catch(error => console.error('Errore nel caricamento delle province:', error));
}
// Event listener per la select delle province
document.getElementById('province').addEventListener('change', async function () {
await sleep(150);
const selectedOption = this.options[this.selectedIndex]; // Ottieni l'opzione selezionata
const provinceName = selectedOption.textContent.split(' (')[0]; // Estrai il nome della provincia
const sigla = selectedOption.textContent.split('(')[1].split(')')[0];
console.log('Sigla della provincia:', sigla); // Stampa la sigla della provincia nella console
// Aggiorna la variabile globale
selectedProvinceSigla = sigla;
console.log('Provincia selezionata:', provinceName); // Stampa il nome della provincia nella console
document.getElementById('selectedProvincia').value = sigla;
document.getElementById('fileCount').value = fileCount;
if (provinceName) {
await loadComuni(provinceName); // Carica i comuni della provincia selezionata
document.getElementById('comuni').disabled = false; // Abilita la select dei comuni
} else {
document.getElementById('comuni').disabled = true; // Disabilita la select dei comuni se nessuna provincia è selezionata
}
});
// Funzione per caricare i comuni in base alla provincia selezionata
async function loadComuni(provinceName) {
try {
const response = await fetch('https://axqvoqvbfjpaamphztgd.functions.supabase.co/comuni/provincia/'+provinceName);
if (!response.ok) {
throw new Error('Errore nel caricamento dei comuni');
}
const data = await response.json();
console.log('Comuni:', data); // Debug: Mostra i dati dei comuni ricevuti
const comuniSelect = document.getElementById('comuni');
comuniSelect.innerHTML = ''; // Svuota le opzioni precedenti
// Aggiungi l'opzione "Seleziona un comune"
const selectOption = document.createElement('option');
selectOption.value = '';
selectOption.textContent = 'Seleziona un comune';
comuniSelect.appendChild(selectOption);
// Aggiungi i comuni alla select
data.forEach(comune => {
const option = document.createElement('option');
option.value = comune.id; // Assumiamo che "id" sia l'ID del comune
option.textContent = comune.nome; // Nome del comune
comuniSelect.appendChild(option);
});
document.getElementById('comuni').disabled = false; // Abilita la select dei comuni
} catch (error) {
console.error('Errore nel caricamento dei comuni:', error);
}
}
// Event listener per la select dei comuni
document.getElementById('comuni').addEventListener('change', function () {
const selectedComuneOption = this.options[this.selectedIndex]; // Ottieni l'opzione selezionata
const selectedComuneName = selectedComuneOption.textContent.split(' (')[0]; // Estrai il nome della provincia
console.log('Comune selezionato:', selectedComuneName); // Stampa il nome del comune nella console
document.getElementById('selectedComune').value = selectedComuneName;
});
// Event listeners per aggiornare le selezioni
document.getElementById('regioni').addEventListener('change', function () {
const regionName = this.value; // Ottieni il nome della regione selezionata
if (regionName) {
loadProvinces(regionName);
document.getElementById('province').disabled = false;
} else {
document.getElementById('province').disabled = true;
document.getElementById('comuni').disabled = true;
}
});
document.getElementById('province').addEventListener('change', function () {
const provinceId = parseInt(this.value);
if (provinceId) {
loadComuni(provinceId);
document.getElementById('comuni').disabled = false;
} else {
document.getElementById('comuni').disabled = true;
}
});
// Carica le regioni all'avvio
loadRegions();
});
Seleziona un pronome
He/Him
She/Her
They/them
Altro
Sei maggiorenne?
Seleziona regione
Seleziona provincia
Seleziona comune
Seleziona provincia
Seleziona comune