I am trying to show an success alert while submitting a form.

here is my code.

HTML form

<button type="submit" class="btn btn-primary" id="successAlert">Add User</button>

and the script in the button here.

 <script>
    const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-gray'
            },
            buttonsStyling: false
        });

    document.getElementById('successAlert').addEventListener('click', function () {
            swalWithBootstrapButtons.fire({
                icon: 'success',
                title: 'Success alert',
                text: 'Your work has been saved',
                showConfirmButton: true,
                timer: 4000
            })
        });
 </script>

It worked with the type="button", but on the other hand type="submit" does not.