甜蜜警报 - 无法将成功甜蜜提醒添加到简单表单提交

Question

**

function bindSweetAlertButtonDemo() {
const swalButton = document.getElementById('sweet-alert-demo');
if (swalButton) { // protect other pages
swalButton.addEventListener('click', () => {
swal({
title: "Nice",
text: "You've added a task. Click on it for more details",
icon: "success"
});
event.preventDefault()
});
}
}

<div>
<%= simple_form_for [ @task] do |f| %>
<%= f.input :name %>
<%= f.input :description %>
<%= f.submit :submit, class: "btn btn-danger" ,id: "sweet-alert-demo" %>
<% end %>
</div>

我尝试制作一个带有提交按钮的表单，以将任务添加到索引页。在提交时，我想要一个成功的甜蜜警报。但是，警报在毫秒后首先消失，但已通过 preventdefault(( 解决了这个问题。但是现在提交实际上不再有效了。有什么想法吗？(我已经正确导入了东西，只是没有将其添加到代码段中(

Answer 1

您需要定义event。如果用户单击Ok，您可以使用swal的.then提交表单。

swalButton.addEventListener('click', (event) => {
swal({
title: "Nice",
text: "You've added a task. Click on it for more details",
icon: "success"
});
event.preventDefault()
});

演示：

const swalButton = document.getElementById('sweet-alert-demo'), form = document.querySelector('form');
function bindSweetAlertButtonDemo() {
if (swalButton) { // protect other pages
swalButton.addEventListener('click', (event) => {
swal({
title: "Nice",
text: "You've added a task. Click on it for more details",
icon: "success"
}).then(function(value){
if(value!=null){
form.submit();
}
});
event.preventDefault();
});
}
}
bindSweetAlertButtonDemo();

<script src="https://unpkg.com/sweetalert@2.1.0/dist/sweetalert.min.js"></script>
<div>
<form>
<input type="text" name="name" placeholder="Name"><br/>
<input type="description" name="description" placeholder="Description"><br/>
<button id="sweet-alert-demo">Submit</button>
</form>
</div>