SweetAlert2 - Bind another event to cancel button?

Question

I am using the latest version of the awesome SweetAlert2 jquery plugin.

I have a simple SweetAlert with 2 buttons. 1 button is the confirm button, the other is the cancel button. I am using the html option to add a text input to the alert. When the user press the confirm button an AJAX call is executed and the alert is closed.

Now I want to use the cancel button to execute some other code instead of the default action which is closing the alert. (The user can close the alert using the showCloseButton: true).

So in short: How to remove the closing handler and add a own custom handler to the cancel button of swal?

That is not exactly what I mean because this is closing the alert. I need to handle the cancel event without closing the alert. Is this possible? — Piet, Feb 22 '17 at 07:36

score 21 · Answer 1 · edited Mar 14 '19 at 18:55

Just add your custom function to catch the rejection, for example:

swal({
   title: 'Some title',
   text: 'some text for the popup',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'Some text for cancel button'
}).then(function(){
   // function when confirm button clicked
}, function(dismiss){
   if(dismiss == 'cancel'){
       // function when cancel button is clicked
   }
});

You can even add more function to catch another dismiss event, just read SweetAlert2 Docs for more info about dismiss event.

score 13 · Answer 2 · answered Aug 07 '18 at 07:07

with a little customization to @Raditya Adi Baskara answer,

swal({
        title: "$titleWarnignBox",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#36c6d3',
        cancelButtonColor: '#d33',
        confirmButtonText: '$confrimBtn',
        cancelButtonText: '$cancelBtn'
    }).then(function(result){
        if(result.value){
            console.log('good');
        }else if(result.dismiss == 'cancel'){
           console.log('cancel');
        }

    });

Hayden Passmore · Accepted Answer · 2019-11-08T22:51:20.703

You could create a custom html file and have a cancel button in that which will fire off you own cancel handler.

for example

<html> <!--custom.html-->      
  <button id="confirmBtn">confirm<button>
  <button id="cancelBtn">cancel<button>
<html>

$.get("custom.html", function (data) {
        swal({
            html: data,
            showCloseButton: false,
            showCancelButton: false,
            showConfirmButton: false
        });
        $("#cancelBtn").click(function () {
            //handle your cancel button being clicked
            $.when($.ajax({....})).then(function() {
                 // when all AJAX requests are complete
             });
        });
        $("#confirmBtn").click(function () {
            //handle your confirm button being clicked
        });
    });

You could just recall the popup on cancel. Add this to your swal function.

function (dismiss) {
   if (dismiss === 'cancel') {
      swal({..});            
   }
}

So in full

swal({
   title: 'Swal Title',
   text: 'Your swal text',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'cancel'
}).then(function(){
   //Confirmed
}, function(dismiss){
   if(dismiss == 'cancel'){
      //swal({..}); //un-comment this line to add another sweet alert popup on cancel
   }
});

score 4 · Answer 4 · answered Aug 17 '20 at 08:35

In SweetAlert2.

Swal.fire({
        title: 'Title here',
        showCloseButton: false,
        showCancelButton: true,
        showConfirmButton: false,
        focusConfirm: false,
        allowOutsideClick: false,
        allowEscapeKey: false,
        cancelButtonText: 'Cancel Payment'
    }).then(function(res) {
        if (res.isDismissed) {
            alert('Cancel button clicked');
        }
    });

score 2 · Answer 5 · answered Aug 24 '19 at 07:53

In sweetalert 2

            swal.fire({
                title: "Notice",
                text: "Are you sure ?",
                showCancelButton: true,
                type: 'error',
                cancelButtonColor: '#d33',
            })
                .then((res) => {
                    if(res.value){
                        console.log('confirmed');
                    }else if(res.dismiss == 'cancel'){
                        console.log('cancel');
                    }
                    else if(res.dismiss == 'esc'){
                        console.log('cancle-esc**strong text**');
                    }
                });

score 1 · Answer 6 · answered Sep 02 '20 at 00:40

In sweetalert2, if you want to prevent the close when the cancel button is clicked, you can add your own custom buttons as html: (Run it live)

var onBtnClicked = (btnId) => {
  // Swal.close();
  alert("you choosed: " + btnId);
};
Swal.fire({
  title: "What you want to do?",
  icon: "warning",
  showConfirmButton: false,
  showCloseButton: true,
  html: `
     <p>select an action</p>
    <div>
      <button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
      <button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
    </div>`
});

Muhammad Febryan · Answer 7 · 2023-02-06T08:55:04.127

sweetalert 2 handle cancel or confirm (with input form)

                Swal.fire({
                title: "Please enter TPL coverage",
                input: 'text',
                showCancelButton: true,
                allowOutsideClick: false,
                preConfirm: (value) => {
                    if (value > 100000000) {
                        Swal.showValidationMessage('Max Rp.100.000.000 !')
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    if (result.value) {
                        let typeOfCarid = $('#typeOfCarid').val();
                        let calculate;
                        if (typeOfCarid != 2) {
                            if (result.value > 50000000) {
                                calculate = (25000000 * 1 / 100) + (25000000 * 0.5 / 100) + ((result.value - 50000000) * 0.25 / 100);
                                //Correct By Calculate Manual MF
                            } else if (result.value > 25000000) {
                                calculate = (25000000 * 1 / 100) + ((result.value - 25000000) * 0.5 / 100);
                                //Correct By Calculate Manual MF
                            } else {
                                calculate = (result.value * 1 / 100);
                            }
                            $('#tplRate').val(calculate);
                        } else {
                            alert('Ini Bus / Truck');
                        }
                    }
                } else if (result.isDismissed) {
                    alert('dismis');
                }
            });

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Feb 20 '23 at 00:37

score 0 · Answer 8 · answered Aug 28 '23 at 22:08

this is the best way i get it going

    function sw_alert() {
    Swal.fire({
        title: 'Your title',
        icon: 'warning',
        showDenyButton: true,
        showCancelButton: true,         
        confirmButtonColor: '#000000',
        cancelButtonColor: '#a8a8a8',
        confirmButtonText: 'Yes',
        denyButtonText: 'No',
    }).then((result) => {
        /* Read more about isConfirmed, isDenied below */
        if (result.isConfirmed) {
             console.log('Yes');
        } else if (result.isDenied) {
             console.log('No');
        } else {
             console.log('cancel');
        }
    })
}

SweetAlert2 - Bind another event to cancel button?

8 Answers8