<dialog id="guestbook" class="modal"> <div class="modal-box w-11/12 max-w-5xl"> <h3 class="text-lg font-bold">Ucapan</h3> <form id="speechForm"> @csrf <label class="form-control w-full max-w-xs"> <div class="label"> <span class="label-text">Nama</span> </div> <input type="text" name="name" placeholder="Taip disini" class="input input-bordered input-sm input-accent w-full max-w-xs" /> </label> <label class="form-control w-full max-w-xs"> <div class="label"> <span class="label-text">Ucapan anda</span> </div> <textarea class="textarea textarea-accent" name="speech" placeholder="Taip disini"></textarea> </label> </form> <div class="modal-action"> <form method="dialog" id="closeSpeechForm"></form> <button type="button" class="btn bg-babybluedark" id="submitSpeechForm">Hantar</button> <button type="button" class="btn" id="submitCloseSpeechForm">Tutup</button> </div> </div> </dialog> @push('script') <script> $(document).ready(function() { $('#submitCloseSpeechForm').click(function(e) { $('#closeSpeechForm').submit(); }); $('#submitSpeechForm').click(function(e) { e.preventDefault(); var formData = $('#speechForm').serialize(); $.ajax({ url: '{{ route('speech.save') }}', type: 'POST', data: formData, success: function(response) { $('#closeSpeechForm').submit(); if ('{{ session('success') }}') { showSuccessMessage('{{ session('success') }}'); } }, error: function(xhr, status, error) { console.error('Error submitting form:', error); } }); }); }) function showSuccessMessage(message) { // Create a dynamic success message element var successAlert = $('<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">' + '<span class="block sm:inline">' + message + '</span>' + '</div>'); // Append the message to a suitable container in your HTML (e.g., modal, form, or body) $('#alert-success').append(successAlert); // Automatically remove the message after 3 seconds setTimeout(function() { successAlert.fadeOut('slow', function() { $(this).remove(); }); }, 3000); // 3 seconds // session()->forget('success'); } </script> @endpush