added spinner on form create/edit

This commit is contained in:
Jagad R R
2025-01-17 16:39:37 +07:00
parent f4a8972a1d
commit d497fe08a5
10 changed files with 302 additions and 10 deletions
@@ -26,7 +26,7 @@
<div class="container-fluid">
<div class="card card-primary card-outline">
<div class="card-body">
<form method="POST" action="{{ route('forms.entertainment.store') }}" enctype="multipart/form-data">
<form id="expense-form" method="POST" action="{{ route('forms.entertainment.store') }}" enctype="multipart/form-data">
@csrf
@include('backend.layouts.partials.messages')
<div class="row">
@@ -76,6 +76,14 @@
<button type="submit" class="btn btn-primary ml-2">Submit</button>
</div>
</form>
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
</div>
<p>Submitting, please wait...</p>
</div>
</div>
</div>
</div>
</div>
@@ -89,5 +97,11 @@
decimalPlaces: 0, // Tidak ada angka desimal
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
});
document.getElementById('expense-form').addEventListener('submit', function (e) {
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
spinnerOverlay.classList.remove('d-none'); // Show overlay
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
});
</script>
@endsection
@@ -26,7 +26,7 @@
<div class="container-fluid">
<div class="card card-primary card-outline">
<div class="card-body">
<form method="POST" action="{{ route('forms.entertainment.update', $form->id) }}" enctype="multipart/form-data">
<form id="expense-form" method="POST" action="{{ route('forms.entertainment.update', $form->id) }}" enctype="multipart/form-data">
@csrf
@method('PUT')
@include('backend.layouts.partials.messages')
@@ -77,6 +77,14 @@
<button type="submit" class="btn btn-primary ml-2">Update</button>
</div>
</form>
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
</div>
<p>Submitting, please wait...</p>
</div>
</div>
</div>
</div>
</div>
@@ -90,5 +98,11 @@
decimalPlaces: 0, // Tidak ada angka desimal
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
});
document.getElementById('expense-form').addEventListener('submit', function (e) {
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
spinnerOverlay.classList.remove('d-none'); // Show overlay
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
});
</script>
@endsection