js swal提交表单时弹出确认框确认后再提交
您可以使用SweetAlert库（swal）来实现在提交表单前弹出确认框，确认后再提交。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Confirmation Dialog Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.css">
</head>
<body>
<form id="myForm" action="submit.php" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<br>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<br>
<button type="submit">Submit</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.js"></script>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, submit it!'
}).then((result) => {
if (result.isConfirmed) {
// 确认后提交表单
document.getElementById('myForm').submit();
}
})
});
</script>
</body>
</html>
在上面的示例代码中，我们使用了SweetAlert2库（swal）来创建一个确认对话框。当用户单击提交按钮时，它会阻止表单的默认提交行为，并弹出一个确认对话框。如果用户确认提交，那么表单会通过document.getElementById('myForm').submit()提交。否则，什么都不会发生。
您需要将上面的示例代码保存为一个HTML文件，并确保引入了SweetAlert2库的CSS和JavaScript文件。另外，您可能需要根据您自己的需求修改表单的action属性和确认对话框的文本内容
原文地址: https://www.cveoy.top/t/topic/iOND 著作权归作者所有。请勿转载和采集!