Javascript 删除前的甜蜜警报确认
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46034634/
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
Sweet Alert confirmation before delete
提问by Jaaayz
Hi I am new in using sweet alert js to make my alert box more fancy. I am using the normal javascript alert confirmation to delete a specific data in my table. However when I try to run a sweet alert confirmation before deleting it deletes the file without the confirmation popping up.
嗨，我是使用甜蜜警报 js 使我的警报框更加花哨的新手。我正在使用普通的 javascript 警报确认来删除表中的特定数据。但是，当我尝试在删除之前运行甜蜜警报确认时，它会删除文件而不会弹出确认。
Here is the code in my JS below.
下面是我的 JS 中的代码。
<script>
archiveFunction() {
swal({
title: "Are you sure?",
text: "But you will still be able to retrieve this file.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, archive it!",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been archived.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
}
</script>
this is my html form below.
这是我下面的 html 表单。
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="hidden" name="p_id" id="p_id" value="<?php echo $rows['p_id']; ?>">
<button class="btn btn-danger" type="submit" name="archive" onclick="archiveFunction()">
<i class="fa fa-archive"></i>
Archive
</button>
</form>
and here is the code in php.
这是php中的代码。
<?php
include('../config.php');
if(isset($_POST['archive']))
{
$p_id = $_REQUEST['p_id'];
// sql to delete a record
$sqli = "UPDATE students SET archive = 2 WHERE p_id=$p_id";
if ($conn->query($sqli) === TRUE) {
echo "swal('Archived!', 'Click ok to see!', 'success')";
} else {
echo "Error Archiving record: " . $conn->error;
}
$conn->close();
}
?>
what I want to happen is to confirm the sweet alert confirmation before deleting the specific data.
我想要发生的是在删除特定数据之前确认甜蜜警报确认。
回答by Ankit Chaudhary
As other mentioned, your button click is submitting the form to the specified action and you are not able to chose your option in the alert. So you should prevent the form submit by using event.preventDefault()and submitting the form only when user press yes.
正如其他人提到的，您的按钮单击将表单提交给指定的操作，您无法在警报中选择您的选项。因此，您应该event.preventDefault()仅在用户按是时使用和提交表单来防止表单提交。
function archiveFunction() {
event.preventDefault(); // prevent form submit
var form = event.target.form; // storing the form
swal({
title: "Are you sure?",
text: "But you will still be able to retrieve this file.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, archive it!",
cancelButtonText: "No, cancel please!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
form.submit(); // submitting the form when user press yes
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<form action="abc" method="POST">
<input type="hidden" name="p_id" id="p_id" value="<?php echo $rows['p_id']; ?>">
<button class="btn btn-danger" name="archive" type="submit" onclick="archiveFunction()">
<i class="fa fa-archive"></i>
Archive
</button>
</form>回答by kuldeep sakdecha
Remove <form>and replace:
删除<form>和替换：
<button class="btn btn-danger" type="submit">
to:
到：
<button class="btn btn-danger ajax_delete" type="button">
call onclick function from the "ajax_delete" through
从“ajax_delete”调用 onclick 函数通过
$(".ajax_delete").on("click", function (){ /*your sweet alert code and after ajax call function */});
After that put your delete code to ajax call file.
之后将您的删除代码放入ajax调用文件。
回答by Script47
This is happening because you're not preventing the default behaviour of the browser by using event.preventDefault()or returnwith either falseor trueaccordingly.
发生这种情况是因为你没有阻止浏览器的默认行为，通过使用event.preventDefault()或return用两种false或true相应。
function [...](e) {
e.preventDefault();
[...]
}
Change,
改变，
<button class="btn btn-danger" type="submit" name="archive" onclick="archiveFunction()">
to,
到，
<button class="btn btn-danger" type="submit" name="archive" onclick="archiveFunction(event)">
to pass the event argument for inline event listeners.
为内联事件侦听器传递事件参数。
Alternativelyif the formis not required then you can just remove the formtags.
或者，如果form不需要，那么您可以删除form标签。
回答by user9472302
This delete confirmation code with sweet alerts in express js
这在express js中删除带有甜蜜警报的确认代码
My code:
我的代码：
function validateForm() {
event.preventDefault(); // prevent form submit
var form = document.forms["myForm"]; // storing the form
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) {
form.submit();
} else {
swal("Your imaginary file is safe!");
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<form name="myForm" method="POST" action="/delete">
<input type="hidden" value="<%= alldata[i]._id %>" name="std_id">
<input type="submit" onclick="validateForm()" class="btn btn-danger btn-xs" value="DELETE">
</form>