51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
// static/js/formSubmitHandler.js
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize all forms with submit buttons
|
|
const forms = document.querySelectorAll('form');
|
|
|
|
forms.forEach(form => {
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
|
|
if (submitBtn) {
|
|
// Store original button HTML
|
|
if (!submitBtn.dataset.originalHtml) {
|
|
submitBtn.dataset.originalHtml = submitBtn.innerHTML;
|
|
}
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
// Only proceed if form is valid
|
|
if (form.checkValidity()) {
|
|
disableSubmitButton(submitBtn);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Disable and show loading state on submit button
|
|
* @param {HTMLElement} button - The submit button element
|
|
*/
|
|
function disableSubmitButton(button) {
|
|
button.disabled = true;
|
|
button.innerHTML = `
|
|
<span class="submit-spinner">
|
|
<i class="fas fa-spinner fa-spin me-1"></i>
|
|
</span>
|
|
<span class="submit-text">${button.dataset.savingText || 'Processing...'}</span>
|
|
`;
|
|
button.classList.add('submitting');
|
|
}
|
|
|
|
/**
|
|
* Reset submit button to original state
|
|
* @param {HTMLElement} button - The submit button element
|
|
*/
|
|
function resetSubmitButton(button) {
|
|
if (button.dataset.originalHtml) {
|
|
button.innerHTML = button.dataset.originalHtml;
|
|
}
|
|
button.disabled = false;
|
|
button.classList.remove('submitting');
|
|
} |