AJAX，jQuery，Javascript，表单Submit和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> 

Answer 2

这里有多个问题。

1. 您不会停止提交表单，因此，单击添加后，表单将立即提交。
2. 每次您尝试使用Submit触发器提交表单时，都会以递归方式调用事件侦听器。

该代码应如下所示

<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 3

您的问题是输入类型为Submit。 这是您的解决方案：

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