Question

实际上，我想要成功提交表单后显示一条消息。

但是现在总是显示消息。想要，当表单成功提交时。如果未成功提交，则不显示消息。

我怎么知道表格提交成功与否？以及如何做？

这是我的代码：

$(document).ready(function() {
  $("#snoAlertBox").fadeIn();
  closeSnoAlertBox();
});

function closeSnoAlertBox() {
  window.setTimeout(function() {
    $("#snoAlertBox").fadeOut(200000)
  }, 3000);
};

#snoAlertBox {
  position: absolute;
  z-index: 1400;
  top: 2%;
  right: 4%;
  margin: 0px auto;
  text-align: center;
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding:20px;">
  <form action="">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </form>
</div>
<div id="snoAlertBox" class="alert alert-success" data-alert="alert">Now Update your Search</div>

请帮助！谢谢。

Answer 1

由什么决定表单是否已成功提交？我没有看到任何验证或将数据发送到服务器。无论如何，您都可以将事件侦听器附加到表单上，但是首先，您需要向其添加一个id，以便可以通过js轻松访问它。

示例：

<form action="" id="myForm">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </form>

const form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
event.preventDefault();
// here you can show something on submit or do whatever you want
});

表单提交成功后如何使用onSuccess（）？

1 个答案: