<dialog id="rsvp" class="modal"> <div class="modal-box w-11/12 max-w-5xl"> <h3 class="text-lg font-bold">RSVP</h3> <form id="rsvpForm"> @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">Bilangan</span> </div> <input type="number" name="member" 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">No. Tel</span> </div> <input type="number" name="phone" placeholder="Taip disini" class="input input-bordered input-sm input-accent w-full max-w-xs" /> </label> </form> <div class="modal-action"> <form method="dialog" id="closeRsvpForm"></form> <button type="button" class="btn bg-babybluedark" id="submitRsvpForm">Hantar</button> <button type="button" class="btn" id="submitCloseRsvpForm">Tutup</button> </div> </div> </dialog> @push('script') <script> $(document).ready(function() { $('#submitCloseRsvpForm').click(function(e) { $('#closeRsvpForm').submit(); }); $('#submitRsvpForm').click(function(e) { e.preventDefault(); var formData = $('#rsvpForm').serialize(); $.ajax({ url: '{{ route('rsvp.save') }}', type: 'POST', data: formData, success: function(response) { $('#closeRsvpForm').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 } </script> @endpush