SweetAlert: How to send a POST request after clicking OK?

Question

I want to you the - SweetAlert for my Website. Now I need to configuration the SweetAlert with this code, so that on klick the "OK" button, it will send via POST formaction="/link/link" post="test=1"

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!",
    cancelButtonText: " No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function(isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
    }
});

I want to ask you, how can I build it in.

Answer 1

Add you POST request trigger in the swal callback, like this:

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!",
    cancelButtonText: " No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function(isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
        post('/link/link', {test: '1'});  // <<< This is what I added
    } else {
        swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
    }
});

The definition of the function post() is found here

Answer 2

For pure JS - this would post parameter post with value post123

var formTest = document.createElement('form');
formTest.setAttribute("method", "post");
formTest.setAttribute("action", "");

var post = document.createElement("input");
post.setAttribute("type", "hidden");
post.setAttribute("name", "post");
post.setAttribute("value", "post123");
formTest.appendChild(post);

document.body.appendChild(formTest);
formTest.submit();

If you want you can use short and nice AJAX calls which require jQuery

Answer 3

I implemented Preconfirm method with Promise...

this.$swal({
            title: '¿Sure?',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            showLoaderOnConfirm: true,
            preConfirm: function(result) {
                return new Promise(function(resolve, reject) {
                    if (result) {
                        axios.post('url', {data:data})
                        .then(function(response){
                            toastr.success('Succes');
                            resolve();
                        })
                        .catch(function(error){
                            toastr.error('Error ');
                            console.log(error);
                            reject();
                        })
                    }
                });
            },
            allowOutsideClick: () => !this.$swal.isLoading(),
        })

Answer 4

try this code, just edit according to your need.

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!",
 cancelButtonText: " No, cancel plx!",
 closeOnConfirm: false,
 closeOnCancel: false },
  function() {
    $.ajax({
      type: "POST",
      data: {
        'data_id': id
      },
      url: 'http://localhost/project/method',
      success: function(data) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
      },
      error: function(data) {
        swal("Cancelled", "Your imaginary file is safe: ) ", " error ");
      }
    });
  }