58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const joinForm = document.getElementById('joinForm');
|
|
if (joinForm) {
|
|
joinForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const submitBtn = joinForm.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.innerText;
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerText = 'Joining...';
|
|
|
|
const formData = new FormData(joinForm);
|
|
|
|
try {
|
|
const response = await fetch('join_community.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
showToast('Welcome to the Pit Wall! 🎉');
|
|
joinForm.reset();
|
|
// Optional: Refresh member list or redirect
|
|
setTimeout(() => location.reload(), 1500);
|
|
} else {
|
|
showToast('Error: ' + result.error, 'danger');
|
|
}
|
|
} catch (error) {
|
|
showToast('Something went wrong. Please try again.', 'danger');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerText = originalText;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
function showToast(message, type = 'success') {
|
|
const toastContainer = document.getElementById('toastContainer');
|
|
const toastHtml = `
|
|
<div class="toast align-items-center text-white bg-${type === 'success' ? 'dark' : 'danger'} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">${message}</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
const toastEl = document.createRange().createContextualFragment(toastHtml).firstElementChild;
|
|
toastContainer.appendChild(toastEl);
|
|
const bsToast = new bootstrap.Toast(toastEl);
|
|
bsToast.show();
|
|
|
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
toastEl.remove();
|
|
});
|
|
}
|