83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
const form = document.getElementById('rsvp-form');
|
||
const statusNode = document.getElementById('form-status');
|
||
const attendanceFields = document.getElementById('attendance-fields');
|
||
const attendanceInputs = Array.from(document.querySelectorAll('input[name="attendance"]'));
|
||
const successModal = document.getElementById('success-modal');
|
||
const successOkButton = document.getElementById('success-ok');
|
||
const closeModalNodes = Array.from(document.querySelectorAll('[data-close-modal]'));
|
||
|
||
function updateAttendanceFields() {
|
||
const selected = document.querySelector('input[name="attendance"]:checked');
|
||
const attending = selected?.value === 'si';
|
||
|
||
attendanceFields.classList.toggle('attendance-fields--hidden', !attending);
|
||
|
||
attendanceFields.querySelectorAll('input, select, textarea').forEach((field) => {
|
||
field.disabled = !attending;
|
||
if (!attending && field.tagName === 'TEXTAREA') field.value = '';
|
||
if (!attending && field.tagName === 'SELECT') field.value = '0';
|
||
});
|
||
}
|
||
|
||
function openSuccessModal() {
|
||
if (!successModal) return;
|
||
successModal.classList.add('success-modal--open');
|
||
successModal.setAttribute('aria-hidden', 'false');
|
||
document.body.classList.add('modal-open');
|
||
successOkButton?.focus();
|
||
}
|
||
|
||
function closeSuccessModal() {
|
||
if (!successModal) return;
|
||
successModal.classList.remove('success-modal--open');
|
||
successModal.setAttribute('aria-hidden', 'true');
|
||
document.body.classList.remove('modal-open');
|
||
}
|
||
|
||
attendanceInputs.forEach((input) => input.addEventListener('change', updateAttendanceFields));
|
||
closeModalNodes.forEach((node) => node.addEventListener('click', closeSuccessModal));
|
||
successOkButton?.addEventListener('click', closeSuccessModal);
|
||
document.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Escape' && successModal?.classList.contains('success-modal--open')) {
|
||
closeSuccessModal();
|
||
}
|
||
});
|
||
updateAttendanceFields();
|
||
|
||
function encode(data) {
|
||
return new URLSearchParams(data).toString();
|
||
}
|
||
|
||
form?.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
|
||
if (!form.reportValidity()) return;
|
||
|
||
const submitButton = form.querySelector('button[type="submit"]');
|
||
const formData = new FormData(form);
|
||
|
||
submitButton.disabled = true;
|
||
statusNode.textContent = 'Invio in corso...';
|
||
|
||
try {
|
||
const response = await fetch('/', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||
body: encode(formData)
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Submission failed');
|
||
}
|
||
|
||
form.reset();
|
||
updateAttendanceFields();
|
||
statusNode.textContent = '';
|
||
openSuccessModal();
|
||
} catch (error) {
|
||
statusNode.textContent = 'C’è stato un problema nell’invio. Riprova tra poco.';
|
||
} finally {
|
||
submitButton.disabled = false;
|
||
}
|
||
});
|