AJAX, jQuery, Javascript, 表单提交 & setTimout() 问题

Question

我想在我点击表单中的输入 "Add" 时在提交前显示一条消息 3 秒。

我真的不明白为什么我的代码不起作用。当我点击 "Add" 时，用户被添加并且我立即被重定向到我的其他页面。没有消息出现，也没有 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

这里有多个问题。

您没有停止表单提交，因此只要单击“添加”，表单就会被提交。
每次您尝试使用提交触发器提交表单时，都会递归调用事件侦听器。

代码应该如下所示

<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="button" 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">
  $('.add').click(function() {
    $('#feedback').show();

    setTimeout(function() {
      $('.form').submit();
    }, 3000);
  });
</script>

Answer 2

您的问题与输入类型提交有关。这是您的解决方案：

<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;">

  <button id="add" type="button">Add</button>
  <div id="feedback">Congratulations</div>'
</form>
<style>
  #feedback {
    display: none;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script>
  $('#add').click(function() {
    $('#feedback').show();

    setTimeout(function() {
      $('.form').submit();
    }, 3000);
  });
</script>

Answer 3

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

另请注意，虽然从技术上讲也可以通过将按钮转换为 type="button" 来实现您的需要，但这不是一个可行的解决方案。首先，当您在任何输入字段中按 return 时，它会破坏提交表单的功能。其次，它打破了可访问性规则。第三，这意味着如果有人在他们的浏览器中禁用了 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>

AJAX, jQuery, Javascript, 表单提交 & setTimout() 问题

AJAX, jQuery, Javascript, Form Submit & setTimout() problem

jquery

ajax

forms

submit

settimeout