haikal/templates/shared/submit_button.html
2025-09-24 11:07:31 +03:00

39 lines
1.3 KiB
HTML

<button class="btn btn-lg btn-phoenix-success md-me-2"
type="submit"
id="submit-button">
<span id="submit-icon">
<i class="fa-solid fa-floppy-disk me-1"></i>
</span>
<span id="submit-text">{{ title }}</span>
<span id="submit-spinner" class="d-none">
<i class="fas fa-spinner fa-spin me-1"></i>
</span>
</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const forms = document.querySelectorAll('form');
forms.forEach(form => {
form.addEventListener('submit', function() {
const submitBtn = this.querySelector('#submit-button');
if (submitBtn) {
// Disable the button
submitBtn.disabled = true;
// Show spinner and hide save icon
const icon = submitBtn.querySelector('#submit-icon');
const text = submitBtn.querySelector('#submit-text');
const spinner = submitBtn.querySelector('#submit-spinner');
if (icon) icon.classList.add('d-none');
if (spinner) spinner.classList.remove('d-none');
if (text) text.textContent = '{{ _("Saving...") }}';
// Optional: Add a class for styling the disabled state
submitBtn.classList.add('btn-disabled');
}
});
});
});
</script>