即使我点击否
,也会提交此代码表单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");
}
});
};
答案 0 :(得分:33)
您需要在提交时阻止默认表单行为。之后,如果选择了确定按钮,则需要以编程方式提交表单。
以下是它的样子:
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。
答案 1 :(得分:5)
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; });
答案 2 :(得分:3)
我在使用 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 上是否也能正常工作,但我真的不知道为什么你会选择比新版本更高的那个。
答案 3 :(得分:2)
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();
}
});
};
答案 4 :(得分:1)
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();
}
});
};
答案 5 :(得分:0)
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;
});
答案 6 :(得分:0)
在保存按钮内,单击添加此代码:
$("#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 :(得分:0)
勾选确认或取消按下:
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
答案 8 :(得分:0)
这是一个迟到的答案,但也许这可以帮助某人。问题是您使用的是旧版本,因此您必须将 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();
}
});
};
答案 9 :(得分:-1)
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);
});