| @@ -42,7 +42,7 @@ | |||||
| @if (!string.IsNullOrEmpty(Model.SuccessMessage)) | @if (!string.IsNullOrEmpty(Model.SuccessMessage)) | ||||
| { | { | ||||
| <div class="alert alert-success alert-dismissible fade show" role="alert"> | <div class="alert alert-success alert-dismissible fade show" role="alert"> | ||||
| @Model.SuccessMessage 1111 | |||||
| @Model.SuccessMessage | |||||
| <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> | <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> | ||||
| </div> | </div> | ||||
| } | } | ||||
| @@ -103,6 +103,15 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="formSubmittingOverlay" class="position-fixed top-0 start-0 w-100 h-100 bg-white bg-opacity-75 d-none" style="z-index: 1050;"> | |||||
| <div class="d-flex justify-content-center align-items-center h-100"> | |||||
| <div class="text-center"> | |||||
| <div class="spinner-border text-primary mb-3" role="status" aria-hidden="true"></div> | |||||
| <p class="fw-semibold mb-0">資料送出中,請稍候...</p> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| @section Scripts { | @section Scripts { | ||||
| @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} | @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} | ||||
| <script> | <script> | ||||
| @@ -141,7 +150,24 @@ | |||||
| return; | return; | ||||
| } | } | ||||
| const overlay = document.getElementById('formSubmittingOverlay'); | |||||
| const submitButtons = form?.querySelectorAll('button[type="submit"], input[type="submit"]'); | |||||
| let isSubmitting = false; | |||||
| const lockForm = () => { | |||||
| if (overlay) { | |||||
| overlay.classList.remove('d-none'); | |||||
| } | |||||
| submitButtons?.forEach(btn => btn.disabled = true); | |||||
| isSubmitting = true; | |||||
| }; | |||||
| form.addEventListener('submit', function(event) { | form.addEventListener('submit', function(event) { | ||||
| if (isSubmitting) { | |||||
| event.preventDefault(); | |||||
| return; | |||||
| } | |||||
| const hasValue = requiredGroup.some(field => field && field.value.trim() !== ''); | const hasValue = requiredGroup.some(field => field && field.value.trim() !== ''); | ||||
| if (!hasValue) { | if (!hasValue) { | ||||
| event.preventDefault(); | event.preventDefault(); | ||||
| @@ -150,6 +176,7 @@ | |||||
| } | } | ||||
| hideError(); | hideError(); | ||||
| lockForm(); | |||||
| }); | }); | ||||
| }); | }); | ||||
| </script> | </script> | ||||