sweet alert continue submitting form on confirm

Question

I've this sweetalert triggered on submit of a form.

$(".swa-confirm").on("submit", function(e) {
        e.preventDefault();
        swal({
            title: $(this).data("swa-title"),
            text: $(this).data("swa-text"),
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: $(this).data("swa-btn-txt"),
            closeOnConfirm: false,
            html: false
        }, function() {

        }
        );
    });

but on clicking confirm I want it to continue submiting the form...

Bad ideas come to mind, like:

var confirmed = false;
$(".swa-confirm").on("submit", function(e) {
    var $this = $(this);
    if (!confirmed) {
        e.preventDefault();
        swal({
            title: $(this).data("swa-title"),
            text: $(this).data("swa-text"),
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#cc3f44",
            confirmButtonText: $(this).data("swa-btn-txt"),
            closeOnConfirm: true,
            html: false
        }, function() {
            confirmed = true;
            $this.submit();
        });
    }
});

or moving swa to button click instead of on submit, and using on submit of a form.

but I don't like this solution, it looks frankesteini to me. Surely there is a better way

Solution 1

$('#btn-submit').on('click',function(e){
    e.preventDefault();
    var form = $(this).parents('form');
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    }, function(isConfirm){
        if (isConfirm) form.submit();
    });
});

Solution 2

I know this is late but it might help someone in the future, I've used this with success for submitting forms with sweetalert confirmations.

 $('#form_id').submit(function (e, params) {
        var localParams = params || {};

        if (!localParams.send) {
            e.preventDefault();
        }

           //additional input validations can be done hear

    swal({
                title: "Confirm Entry",
                text: "Are you sure all entries are correct",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#6A9944",
                confirmButtonText: "Confirm",
                cancelButtonText: "Cancel",
                closeOnConfirm: true
            }, function (isConfirm) {
                if (isConfirm) {
                    $(e.currentTarget).trigger(e.type, { 'send': true });
                } else {

              //additional run on cancel  functions can be done hear

            }
        });
});

Solution 3

Here's another example, asking the user to confirm via checkbox.

HTML

<form id="myForm">
    <button type="submit" id="btn-submit">Submit</button>
</form>

JavaScript

$(document).on('click', '#btn-submit', function(e) {
    e.preventDefault();
    swal({
        title: 'Confirm',
        input: 'checkbox',
        inputValue: 0,
        inputPlaceholder: ' I agree with the Terms',
        confirmButtonText: 'Continue',
        inputValidator: function (result) {
            return new Promise(function (resolve, reject) {
                if (result) {
                    resolve();
                } else {
                    reject('You need to agree with the Terms');
                }
            })
        }
    }).then(function (result) {
        $('#myForm').submit();
    });
});

Solution 4

I believe this is a little more elegant:

$(".swa-confirm").submit(function (e) {
    e.preventDefault();
    swal({
        title: $(this).data("swa-title"),
        text: $(this).data("swa-text"),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#cc3f44",
        confirmButtonText: $(this).data("swa-btn-txt"),
        closeOnConfirm: false,
        html: false
    }, function(){
        $(".swa-confirm").off("submit").submit();
    });
});

Solution 5

function testalert(){

swal(

    {
        title              : "Are you sure?",
        text               : "You want to save?",
        type               : "warning",
        allowEscapeKey     : false,
        allowOutsideClick  : false,
        showCancelButton   : true,
        confirmButtonColor : "#DD6B55",
        confirmButtonText  : "Yes",
        showLoaderOnConfirm: true,
        closeOnConfirm     : false
    }, 

    function (isConfirm) {

        if (isConfirm) {
            profileinfo.submit();
            return true;
        }

        return false;

    }

);

}

View more solutions

Comments

[Admin]

nope. my version is better. cause I'm not hardcoding form name.

[Rafael Cuevas]

I made a change, what do you think?

[Admin]

well thanks, but concept didn't change very much from my version? I was looking for something short and sweet.

[Rafael Cuevas]

Ok, I hope you find something more comfortable and sweet. Sweet alert looks good but it is still a bit ugly to use.

[CoalaWeb]

I think you are missing a closing semi colon ; but other than that I like your answer ;)

[Abhijeet]

This won't do any form validations though

[pradeep]

<button id="prty_form_save" type="button" onclick="return testalert();">SAVE</button> button type must be button ( dont use input type= submit)

[Marek Szmalc]

You should do it using submit not click cause most of browsers right now will make validation at the beggining and it'll be lots of better for you r ussers

[Jaber Al Nahian]

@MarekSzmalc check stackoverflow.com/a/69026840/823454

[Jaber Al Nahian]

@Abhijeet check stackoverflow.com/a/69026840/823454

[Máté Gregor]

It is even better if you put the whole swal function inside the if loop after the preventDefault.

[Sanushi Salgado]

Thanks! This worked for me.