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.

i assume you need to alter `if (isConfirm) {}` part. You can make new `form` with needed fields, append it to `body` and then use `form.submit()` — bigbobr, Nov 20 '14 at 09:05
@Nabil Kadimi, in your answer, `post()` function does exactly what i wrote below ;) — bigbobr, Nov 20 '14 at 10:36

score 5 · Answer 1 · edited May 23 '17 at 12:00

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

score 2 · Answer 2 · answered Apr 19 '18 at 13:53

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(),
        })

This worked for me. But not sure what supposed to do functions "resolve()" and "reject()", so I just ignored them. — eduardo a, Feb 18 '19 at 18:46
Resolve method, it's return directly to "then" method if your use (in this case sweetalert); reject method return "false" and cancel operation — Efrén, Feb 19 '19 at 19:09

score 1 · Answer 3 · answered Nov 20 '14 at 09:28

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

score 0 · Answer 4 · answered Mar 30 '16 at 08:10

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 ");
      }
    });
  }

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

4 Answers4