如何使用甜蜜警报确认？答案

【问题标题】：How to use confirm using sweet alert?如何使用甜蜜警报确认？
【发布时间】：2015-09-17 04:02:22
【问题描述】：

在此代码表单中即使我点击否也已提交

document.querySelector('#from1').onsubmit = function(){

 swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, I am sure!',
    cancelButtonText: "No, cancel it!",
    closeOnConfirm: false,
    closeOnCancel: false
 },
 function(isConfirm){

   if (isConfirm){
     swal("Shortlisted!", "Candidates are successfully shortlisted!", "success");

    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
 });
};

【问题讨论】：

event.preventDefault();添加此语句。
@Pratik 仍然无法正常工作

标签： javascript jquery

【解决方案1】：

我认为最好的方法是解释前端和后端，所以会深入一点。

首先，您必须在 Web.php 文件中创建路由。
在您的刀片文件中添加以下代码并将操作属性更改为您的路由位置，无论您可以通过路由还是简单地通过 URL 来实现它。

记住不要忘记通过自己的路线

   <form method="POST" action="{{route('reports.destroy', $dummy->id)}}">
     {{ csrf_field() }}
     {{ method_field('DELETE') }}

    <button type="submit" class="btn btn-danger delete-user">
       Delete {{-- you can add your icon here if you want --}}

    </button> </form>

在上面的代码中，我们制作了删除按钮，并通过：路由到我们的控制器，其中我们有“删除功能”。

现在您需要将以下链接添加到您的页头标签中。

  {{-- links for pop up alert --}}
   <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   {{-- links for pop up alert --}}

现在添加下面的jQuery代码。

<script type="text/javascript">

$('.delete-user').click(function(e){
  e.preventDefault();

  Swal.fire({
  title: 'Are you sure?',
  text: "You want to delete record,
  icon: 'warning',
  showCancelButton: true,
  timer: 4000,
  timerProgressBar: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    $(e.target).closest('form').submit() // Post the surrounding form

  }
})



});
</script>

你已经完成了，现在让我解释一下上面的代码：它正在获取名为“delete-user”的类引用，当你点击它时，句柄将转到你的 jQuery 代码，然后你可以执行它。

【讨论】：

【解决方案2】：

点击此链接。我已经在 angular usingbswal.fire 中使用 Ok Cancel 按钮解决了这个问题，Ok Cancel 上的布尔值单击要更新和超时，之后 Swal 将自动关闭

Angular Swal.fire() with timeout and ok cancel Button

【讨论】：

【解决方案3】：

这是一个迟到的答案，但也许这可以帮助某人。问题是您使用的是旧版本，因此您必须将 if 语句更改为 isConfirm.value === true 以验证确认和 isConfirm.dismiss == "cancel" 以取消确认。这样就可以解决问题了。

document.querySelector('#from1').onsubmit = function(e) {

 swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, I am sure!',
    cancelButtonText: "No, cancel it!",
    closeOnConfirm: false,
    closeOnCancel: false
 },
 function(isConfirm){

   if (isConfirm.value === true){
     swal("Shortlisted!", "Candidates are successfully shortlisted!", "success");

    } else if(isConfirm.dismiss === "cancel") {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
         e.preventDefault();
    }
 });
};

【讨论】：

【解决方案4】：

检查确认或取消按下：

     swal2.fire({
            title: 'Your Title',
            input: 'textarea',
            inputAttributes: {
                autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonText: 'ok',
            cancelButtonText: 'cancel',
            allowOutsideClick: false
        }).then((result) => {
            if (result.dismiss !== 'cancel') {

                alert('confirm pressed');
            }
           else
            {
                alert('cancel pressed');

            }
        })

如果您使用 Swal，请将 swal2 更改为 Swal

【讨论】：

【解决方案5】：

我也遇到过 SweetAlert2 的问题。 SA2 与 1 不同，并将所有内容都放在结果对象中。上面的可以用下面的代码来完成。

Swal.fire({
    title: 'A cool title',
    icon: 'info',
    confirmButtonText: 'Log in'
  }).then((result) => {
    if (result['isConfirmed']){
      // Put your function here
    }
  })

放置在 then 结果中的所有内容都会运行。 Result 包含几个参数，可以用来完成这个技巧。很简单的技术。不确定它在 SweetAlert1 上是否同样有效，但我真的不知道你为什么会选择新版本之上的那个。

【讨论】：

这是我在 SA2 中寻找的，谢谢。

【解决方案6】：

在您的保存按钮内单击添加此代码：

$("#btnSave").click(function (e) {
  e.preventDefault();
  swal("Are you sure?", {
    buttons: {
      yes: {
        text: "Yes",
        value: "yes"
      },
      no: {
        text: "No",
        value: "no"
      }
    }
  }).then((value) => {
    if (value === "yes") {
      // Add Your Custom Code for CRUD
    }
    return false;
  });
});

【讨论】：

【解决方案7】：

100% 正常工作

使用属性做一些小技巧。在您的表单中添加一个类似 data-flag 的属性，将“0”指定为 false。

<form id="from1" data-flag="0">
    //your inputs
</form>

在你的 javascript 中：

document.querySelector('#from1').onsubmit = function(e){

    $flag = $(this).attr('data-flag');

    if($flag==0){
        e.preventDefault(); //to prevent submitting

        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
            closeOnConfirm: false,
            closeOnCancel: false
         },
         function(isConfirm){

           if (isConfirm){
                swal("Shortlisted!", "Candidates are successfully shortlisted!", "success");

                //update the data-flag to 1 (as true), to submit
                $('#from1').attr('data-flag', '1');
                $('#from1').submit();
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error"); 
            }
         });
    }

    return true;
});

【讨论】：

【解决方案8】：

document.querySelector('#from1').onsubmit = function(e){

 swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, I am sure!',
    cancelButtonText: "No, cancel it!",
    closeOnConfirm: false,
    closeOnCancel: false
 },
 function(isConfirm){

   if (isConfirm.value){
     swal("Shortlisted!", "Candidates are successfully shortlisted!", "success");

    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
         e.preventDefault();
    }
 });
};

【讨论】：

不需要isConfirm.value，可以使用if (isConfirm) { ... }，确认后返回true

【解决方案9】：

您需要防止提交时的默认表单行为。之后，您需要以编程方式提交表单，以防选择“确定”按钮。

这是它的样子：

document.querySelector('#from1').addEventListener('submit', function(e) {
  var form = this;

  e.preventDefault(); // <--- prevent form from submitting

  swal({
      title: "Are you sure?",
      text: "You will not be able to recover this imaginary file!",
      icon: "warning",
      buttons: [
        'No, cancel it!',
        'Yes, I am sure!'
      ],
      dangerMode: true,
    }).then(function(isConfirm) {
      if (isConfirm) {
        swal({
          title: 'Shortlisted!',
          text: 'Candidates are successfully shortlisted!',
          icon: 'success'
        }).then(function() {
          form.submit(); // <--- submit form programmatically
        });
      } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
      }
    })
});

_{UPD。上面的示例使用 sweetalert v2.x promise API。}

演示： http://plnkr.co/edit/YTY7PDs5Uh1XGUo9ic1s?p=preview

【讨论】：

现在点击确定按钮后什么都没有发生。它坚持甜蜜的警报
Uncaught TypeError: object is not a function is shown
检查工作演示。然后对比你的代码，你可能会混淆一些东西。
检查了您的代码，但它在我的代码中不起作用，再次显示相同的错误
如果我在确认后删除了成功的 swal，那么它会给我错误

【解决方案10】：

swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Confirm!'
}).then(function(){
    alert("The confirm button was clicked");
}).catch(function(reason){
    alert("The alert was dismissed by the user: "+reason);
});

【讨论】：

我在使用此代码时出现以下错误“无法读取 Object._navigation.onsuccesssignout 处未定义的属性 'then'”
你运行的 jQuery 版本是什么？尝试使用最新的 jQuery 版本。
这总是显示“点击确认按钮”，你应该添加if条件来检查点击ok
你可以在 then 函数中实现任何东西。我只是在演示中使用了警报。

【解决方案11】：

你需要使用 then() 函数，像这样

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, I am sure!',
    cancelButtonText: "No, cancel it!"
 }).then(
       function () { /*Your Code Here*/ },
       function () { return false; });

【讨论】：

【解决方案12】：

document.querySelector('#from1').onsubmit = function(e){

 swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, I am sure!',
    cancelButtonText: "No, cancel it!",
    closeOnConfirm: false,
    closeOnCancel: false
 },
 function(isConfirm){

   if (isConfirm){
     swal("Shortlisted!", "Candidates are successfully shortlisted!", "success");

    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
         e.preventDefault();
    }
 });
};

【讨论】：

即使我没有点击任何按钮，也正在提交此表单。这是警报的一闪而过，但随后表单已提交
这是不正确的，e.preventDefault 必须在匿名函数之外。
无论函数在做什么，代码都会运行