Submitting form using Sweet Alert (aka Swal)

Question

I'm using Swal to replace all JavaScript default alerts and stuffs. There's a form on one of my pages for which also I'm using Swal to ask the user to confirm his action (deleting a file) before making it happen.

The problem is I can not get the form working. Here's the Swal code:

jQuery('.deleteFile').click(function(event){
    event.preventDefault();
    swal({
        title: "You sure about deleting this file?",
        icon: "warning",
        buttons: {
            cancel: "hmm let me think this through",
            confirm: "100% sure !",
        },
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            $('#form1').submit();
        } else {
            return false;
        }
    });
});

And this is my submit button:

<button type="submit" name="delete_file" class="btn btn-danger deleteFile">Delete</button>

There are few things to mention here :

I'm totally a newbie when it comes to JavaScript / jQuery. So if you notice any hilarious mistake here, pardon my rookieness <3
I searched a lot about this and tried out all the suggestions that I found, like using the isConfirm function suggested by many users. But none worked. The use of isConfirm function actually bugs the entire code and even the alert part doesn't pop up.
The .then((willDelete) part of the code is the Swal's default code, which actually works fine.
The class deleteFile is pointing to the submit button. The ID form1 points to the form itself.
At the current state of the code, when the user presses confirm button, the page refreshes, looking like it has done the job. But it's actually not working. I've written the following code to test it out :
```
if(isset($_POST['delete_file'])){
    echo 'WOOT IT WORKED!';
}
```

But it doesn't echo anything (QQ)

Needless to say that delete_file is the name attribute of my submit button.

First of all, Java and JavaScript are two slightly different things :D — Limon Monte, Jan 30 '18 at 14:28
As a wise man once said: "[_Java and Javascript are similar like Car and Carpet are similar_.](https://stackoverflow.com/a/245068)" — Ivar, Jan 30 '18 at 14:44
@ArashBarazandeh [Your code seems to work fine](https://jsfiddle.net/uqgcbund/2/). Are you sure you have a `method="POST"` as a form attribute and that you have an input field "`delete_file`"? — Ivar, Jan 30 '18 at 15:08
@Ivar : 100% sure. When I remove the entire Swal code, the form and the echo part work just fine. There's some issue with my Swal coding :-/ — Arash Barazandeh, Jan 30 '18 at 15:23
@Ivar : Here's the code : `` which of course is written inside form tag. — Arash Barazandeh, Jan 30 '18 at 16:14

score 1 · Accepted Answer · answered Jan 30 '18 at 16:19

Needless to say that delete_file is the name attribute of my submit button.

Well that is the problem. The name of your submit button is only submitted if you click that button. If you submit a form with JavaScript, the submit button name and value are not submitted.

To prevent this you can, instead of having the name/value in the submit button, add them to a hidden input like so:

<input type="hidden" name="delete_file" value="Delete">

Or you can check if another field is set, like the id of the file you want to delete in your case.

I had absolutely no idea about this part : "If you submit a form with JavaScript, the submit button name and value are not submitted." Thanks for mentioning that. Your hidden input suggestion worked perfectly fine. Thanks for that too :o) — Arash Barazandeh, Jan 30 '18 at 19:45

Submitting form using Sweet Alert (aka Swal)

1 Answers1