时间戳

首页 > 解决方案 > 表单提交成功时如何使用onSuccess()？

javascript - 表单提交成功时如何使用onSuccess()？

问题描述

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

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

如何知道表单提交成功与否？怎么做？

这是我的代码：

$(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>

请帮忙！谢谢你。

标签： javascripthtmljquerycssforms

解决方案

什么决定表单是否提交成功？我没有看到任何验证或向服务器发送数据。无论如何，您可以将事件侦听器附加到您的表单，但首先，您需要为其添加一个 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
});

推荐阅读