html 如何让swal等待按钮点击？

nr7wwzry 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(264)

我使用swal（“”）在表单提交后向用户通知一条可视消息。
这段代码可以工作，但是swal元素会立即消失，如果我使用alert（“”），代码就可以工作，但是目标是让它可以和swal（“”）一起工作。

let form = document.getElementById("form");
form.addEventListener("submit", (e) => {
    valid = form.checkValidity();
    if(valid) {
      swal({
      title:"Registro Salvo!",
      text:"Navegue até dados de natalidade para visualizar.",
      icon:"success", 
      button:"Ok" }
      );
      return false;
    }
    else {
      return true;
    }
});

<form id="form" action="index.html" method="POST">
  <label for="FirstName">First Name:</label>
  <input type="text" id="FirstName" placeholder="First Name" />
  <label for="LastName">Last Name:</label>
  <input type="text" id="LastName" placeholder="Last Name" />
  <input type="Submit" value="Submit" />
</form>

Html

来源：https://stackoverflow.com/questions/74764743/how-to-make-swal-wait-for-button-click

1条答案

按热度按时间

jxct1oxe1#

根据代码现在的工作方式，swal消息确认表单已经提交，但不能保证表单已经成功接收。
如果你对这个功能没意见，那么你可以通过把提交按钮改成一个普通的按钮并自己调用submit（）来解决你所面临的问题。
我没有使用过sweetalert（所以下面的代码可能不起作用，我没有测试过它），但是看一下文档，你应该可以使用.then()来捕获消息框上的close/ok，这样你就可以显示消息，然后在用户关闭消息框时实际提交表单。

let button = document.getElementById("submit_button")
let form = document.getElementById("form")

button.addEventListener("click", (e) => {
    e.preventDefault();
    swal({
        title:"Registro Salvo!",
        text:"Navegue até dados de natalidade para visualizar.",
        icon:"success", 
        button:"Ok" }
    ).then( () => {
      form.submit()
    })
})

<form id="form" action="index.html" method="POST">
  <label for="FirstName">First Name:</label>
  <input type="text" id="FirstName" placeholder="First Name" />
  <label for="LastName">Last Name:</label>
  <input type="text" id="LastName" placeholder="Last Name" />
  <input type="button" value="Submit" id="submit_button" />
</form>

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何让swal等待按钮点击？

1条答案

相关问题

热门标签

最新问答