CODEWITHSUNDEEP
javascriptjquerysweetalert
Diogo Neves
Diogo Neves

Reputation: 51

How can i show a sweetalert message before form submit?

I'm having trouble with sweetalert, I want it to pop up a message in sweetalert telling the user that the vehicle was inserted, and when he clicks on the "Ok" button, it should make the submission of the form. I have this code, and it's not working for me, can anyone help ?

<script>
    $(document).ready(function () {
        $("form").submit(function (event) {
            e.preventDefault();
            var form = $(this);
            Swal.fire({
                icon: 'success',
                title: 'Registado',
                text: 'O seu veiculo foi registado!'
            }, function () {
                $(this).trigger('sumbit');
            });
        });
    });
</script>

Form is going through, but no sweetalert message is shown.

Edit1: Its now showing the sweetalert, but the submission is not going. This code works but its with JS alert -

$("form").submit(function(){
  alert("Submitted");
});

Upvotes: 0

Views: 716

Answers (2)

Adrian Roworth
Adrian Roworth

Reputation: 823

Couple of things that I have immediately noticed:

  • You are passing in event, but trying to call e.preventDafault().
  • $(this).trigger('sumbit'); typo.

Updated those issue in the below snippet.

$(document).ready(function () {
    var shownPopup = false;
    $("form").submit(function (event) {
        if (shownPopup === false) {
            event.preventDefault();
            shownPopup = true;
            var form = $(this);
            Swal.fire({
                icon: 'success',
                title: 'Registado',
                text: 'O seu veiculo foi registado!'
            }, function () {
                form.trigger('submit');
            });
        }
    });
});

Here is a solution using promises, as seen implemented in the https://sweetalert2.github.io/ docs:

$(document).ready(function () {
    var shownPopup = false;
    $("form").submit(function (event) {
        if (shownPopup === false) {
            event.preventDefault();
            shownPopup = true;
            var form = $(this);
            Swal.fire({
                icon: 'success',
                title: 'Registado',
                text: 'O seu veiculo foi registado!'
            }).then(function() {
                form.trigger('submit');
            });
        }
    });
});

Upvotes: 4

mykoman
mykoman

Reputation: 1905

It seems your preventDefault is not working because you have e.preventDefault(); instead of event.preventDefault(); knowing that your function takes "event" rather than "e" as argument.

Upvotes: 0

Related Questions