75 lines
2.8 KiB
JavaScript
75 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const name = document.getElementById('name').value;
|
|
const email = document.getElementById('email').value;
|
|
const message = document.getElementById('message').value;
|
|
const submitButton = this.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton.innerHTML;
|
|
|
|
// Basic validation
|
|
if (!name || !email || !message) {
|
|
showToast('Please fill out all fields.', 'danger');
|
|
return;
|
|
}
|
|
|
|
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
|
|
submitButton.disabled = true;
|
|
|
|
const formData = new FormData(this);
|
|
|
|
fetch('contact_handler.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast('Thank you! Your message has been sent.', 'success');
|
|
contactForm.reset();
|
|
} else {
|
|
showToast(data.error || 'An unknown error occurred.', 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showToast('An error occurred while sending the message.', 'danger');
|
|
console.error('Error:', error);
|
|
})
|
|
.finally(() => {
|
|
submitButton.innerHTML = originalButtonText;
|
|
submitButton.disabled = false;
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
function showToast(message, type = 'success') {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
if (!toastContainer) return;
|
|
|
|
const toastId = 'toast-' + Date.now();
|
|
const toastHTML = `
|
|
<div id="${toastId}" class="toast align-items-center text-white bg-${type} 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>
|
|
`;
|
|
|
|
toastContainer.insertAdjacentHTML('beforeend', toastHTML);
|
|
|
|
const toastElement = document.getElementById(toastId);
|
|
const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
|
|
toast.show();
|
|
|
|
toastElement.addEventListener('hidden.bs.toast', function () {
|
|
toastElement.remove();
|
|
});
|
|
}
|