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

Posted 2023-05-09

【中文标题】表单提交成功时如何使用onSuccess()？

【英文标题】：How to use onSuccess() when form submitted successfully?

【发布时间】：2020-10-09 02:45:25

【问题描述】：

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

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

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

这是我的代码：

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

请帮忙！谢谢。

【问题讨论】：

一种选择是将其发布到控制器或端点，并通过将用户重定向到感谢页面来处理成功或错误。

在您显示的代码中，提交表单时，页面会重新加载，任何地方都没有成功事件

嗯，但不能在 jQuery 中做到这一点？

【参考方案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
);