Javascript 如何使用甜蜜警报进行确认？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31136889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 06:17:51 来源:igfitidea点击:
How to use confirm using sweet alert?
提问by dfsq
In this code form is submitted even i am clicking on no
在这个代码表单中，即使我点击了 no
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");
}
});
};
回答by dfsq
You will need to prevent default form behaviour on submit. After that you will need to submit form programmatically in case of Ok button is selected.
您需要防止提交时的默认表单行为。之后，如果选择了“确定”按钮，您将需要以编程方式提交表单。
Here is how it could look like:
这是它的样子：
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. Example above uses sweetalert v2.x promise API.
更新。上面的示例使用 sweetalert v2.x promise API。
回答by saka
You need To use then() function, like this
你需要使用 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; });
回答by Bit_Pulse
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();
}
});
};
回答by Moode Osman
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();
}
});
};回答by gecko
100% working
100% 工作
Do some little trick using attribute. In your form add an attribute like data-flagin your form, assign "0" as false.
使用属性做一些小技巧。在您的表单中添加一个类似data-flag的属性，将“0”指定为 false。
<form id="from1" data-flag="0">
//your inputs
</form>
In your javascript:
在你的 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;
});
回答by Hiran D.A Walawage
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);
});
