Как использовать onSuccess () при успешной отправке формы?

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

Что определяет, была ли форма отправлена ​​успешно? Я не вижу никакой проверки или отправки данных на сервер. В любом случае, вы можете прикрепить прослушиватель событий к своей форме, но сначала вам нужно будет добавить к нему идентификатор, чтобы он мог быть легко доступен через 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
});