javascript - 使用 Sweet Alert(又名 Swal)提交表单

Question

我正在使用 Swal 来替换所有 JavaScript 默认警报和内容。我的一个页面上有一个表单，我还使用 Swal 要求用户在执行操作之前确认其操作(删除文件)。

问题是我无法使表单正常工作。这是 Swal 代码:

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

这是我的提交按钮:

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

这里有几件事要提:

• 对于 JavaScript/jQuery，我完全是个新手。因此，如果您发现这里有任何搞笑的错误，请原谅我的菜鸟<3

• 我对此进行了很多搜索，并尝试了我找到的所有建议，例如使用许多用户建议的 isConfirm 函数。但没有一个奏效。使用 isConfirm 函数实际上会导致整个代码出现错误，甚至警报部分也不会弹出。

• 代码中的 .then((willDelete) 部分是 Swal 的默认代码，实际上工作得很好。

• 类deleteFile 指向提交按钮。 ID form1 指向表单本身。

• 在代码的当前状态下，当用户按下确认按钮时，页面会刷新，看起来好像已经完成了工作。但实际上并不起作用。我编写了以下代码来测试它:

  if(isset($_POST['delete_file'])){
      echo 'WOOT IT WORKED!';
  }
  

但它没有回显任何内容(QQ)

不用说，delete_file 是我的提交按钮的 name 属性。

Answer 1

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

嗯，这就是问题所在。仅当您单击该按钮时，才会提交提交按钮的名称。如果您使用 JavaScript 提交表单，则不会提交提交按钮名称和值。

为了防止这种情况，您可以不将名称/值放在提交按钮中，而是将它们添加到隐藏输入中，如下所示:

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

或者您可以检查是否设置了其他字段，例如您要删除的文件的 ID。