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

Posted 2023-05-09

【中文标题】AJAX、jQuery、Javascript、表单提交和 setTimout() 问题

【英文标题】：AJAX, jQuery, Javascript, Form Submit & setTimout() problem

【发布时间】：2020-01-18 04:41:15

【问题描述】：

当我点击我在表单中输入的“添加”时，我想在提交前显示一条消息 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>

【问题讨论】：

究竟是什么不工作？

抱歉，帖子已编辑

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

【讨论】：

哇，谢谢你所有的罗里！事实上，这是正确的，它工作得很好！ :D 但我仍然不明白“$('.form')[0]”，为什么要添加“[0]”？

检索Element 对象，而不是jQuery 对象。您需要在其上引发 submit 事件以防止无限循环。

没问题，很高兴为您提供帮助

好的，非常感谢您的澄清！如果表单依赖于一个 ID 而不是一个类，那么没有什么不同？

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

【讨论】：

请注意，更改为type="button" 不是一个好主意。原因见我的回答。

啊，是的。这也不错。

【参考方案3】：

您的问题在于输入类型提交。 这是您的解决方案：

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

【讨论】：

请注意，更改为type="button" 不是一个好主意。原因见我的回答。