如何使用甜蜜警報確認？

Question

在此代碼表單中提交，即使我點擊否

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

Answer 1

您需要防止提交時的默認表單行為。 之后，如果選擇了“確定”按鈕，您將需要以編程方式提交表單。

這是它的樣子：

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

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

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

Answer 2

你需要使用 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; });

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

我在 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 上是否同樣有效，但我真的不知道為什么你會選擇比新版本更高的那個。

Answer 7

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

Answer 8

在您的保存按鈕內單擊添加此代碼：

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

Answer 9

檢查確認或取消按下：

     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

Answer 10

這是一個遲到的答案，但也許這可以幫助某人。 問題是您使用的是舊版本，因此您必須將 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();
    }
 });
};

Answer 11

單擊此鏈接。 我已經在 angular usingbswal.fire 中使用 Ok Cancel 按鈕解決了這個問題，Ok Cancel 上的布爾值單擊要更新和超時，之后 Swal 將自動關閉

帶有超時和確定取消按鈕的 Angular Swal.fire()

Answer 12

我相信最好的方法是解釋前端和后端，所以會深入一點。

1. 首先，您必須在您的Web.php文件中創建一個路由。
2. 在您的刀片文件中添加以下代碼並將 action 屬性更改為您的路由位置，無論您可以通過路由還是簡單地通過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 代碼，然后你可以執行它。

Answer 13

甜心 V1

swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes',
                    cancelButtonText: "No",
                    closeOnConfirm: false,
                    closeOnCancel: true
                },
                function(resp){
                    console.log(resp)
                    if (resp){
                    console.log("sssssssssssssiiiii")
                    } else  {
                        console.log('noooooooooooooooooooo')
                    }
            });

甜心 V2

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});