jquery - AJAX、jQuery、Javascript、表单提交和 setTimout() 问题

Question

当我点击表单中的输入“添加”时，我希望在提交之前显示一条消息 3 秒。

我真的不明白为什么我的代码不起作用。当我单击“添加”时，将添加用户并立即重定向到我的其他页面。没有消息出现，也没有 3 秒的延迟。

有人可以帮我吗？

$('.form').submit(function() {
  $('#feedback').show();

  setTimeout(function() {
    $('.form').submit();
  }, 3000);
});

#feedback {
  display: none;
}

<form autocomplete="off" class="form" method="post" action="Index.php?action=addUtilisateurs">
  <label for="pseudo">Login :</label>
  <input required="required" readonly onfocus="this.removeAttribute('readonly');" name="pseudo" type="text" id="pseudo" value="<?php if (isset($pers)) echo $pers->getLogin(); ?>">
  <label for="password">Password :</label>
  <input required="required" readonly onfocus="this.removeAttribute('readonly');" type="password" name="password" id="password" value="<?php if (isset($pers)) echo $pers->getMotDePasse(); ?>" oncontextmenu="return false;">
  <input id="add" type="submit" value="Add" />
  <div id="feedback">Congratulations</div>'
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>

Answer 1

问题是因为您没有停止表单提交。您需要对引发的 submit 事件调用 preventDefault()。从这里开始，您需要在计时器到期时在底层 DOM 元素上引发 submit 事件。这是因为，如果您在 jQuery 对象上触发该事件，它将被您的 submit 事件处理程序捕获并再次阻止。

另请注意，虽然从技术上讲也可以通过将按钮转换为 type="button" 来实现您的需求，但这不是一个可行的解决方案。首先，当您在任何输入字段中按回车键时，它会破坏提交表单的功能。其次，它违反了可访问性规则。第三，这意味着如果有人在浏览器中禁用了 JS，那么将无法提交您的表单。

话虽如此，试试这个:

$('.form').submit(function(e) {
  e.preventDefault();
  $('#feedback').show();

  setTimeout(function() {
    $('.form')[0].submit();
  }, 3000);
});

#feedback {
  display: none;
}

<form autocomplete="off" class="form" method="post" action="Index.php?action=addUtilisateurs">
  <label for="pseudo">Login :</label>
  <input required="required" readonly onfocus="this.removeAttribute('readonly');" name="pseudo" type="text" id="pseudo" value="<?php if (isset($pers)) echo $pers->getLogin(); ?>">
  <label for="password">Password :</label>
  <input required="required" readonly onfocus="this.removeAttribute('readonly');" type="password" name="password" id="password" value="<?php if (isset($pers)) echo $pers->getMotDePasse(); ?>" oncontextmenu="return false;">
  <input id="add" type="submit" value="Add" />
  <div id="feedback">Congratulations</div>'
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>