表单以 HTML 格式提交后如何向用户显示“请稍候”消息[重复]答案

【问题标题】：How to show a "please wait" message to a user after form submits in HTML [duplicate]表单以 HTML 格式提交后如何向用户显示“请稍候”消息[重复]
【发布时间】：2021-11-11 20:34:27
【问题描述】：

我想在表单上点击“提交”后向用户显示“请稍候”消息。现在我已经设法在用户单击它后至少禁用该按钮，但是如何在下一页加载时显示“请稍候”消息/模式？

这是我的代码：

<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">

$('form').submit(function(){
   $(this).children('input[type=submit]').prop('disabled', true);
 });

【问题讨论】：

stackoverflow.com/questions/61305024/…
@MisterJojo：这完全有可能。您在提交表单之前显示指示器并将其隐藏在准备好的文档中......
也许重命名提交按钮的值？ $(this).children('input[type=submit]').attr('value', 'Please wait...');
哇，非常感谢大家提供的所有选项！ @Jack，我喜欢简单地将按钮文本更改为“请稍候......”的想法 - 超级简单和优雅。
@DanielBeck 我认为您的意思是在等待下一页加载之前页面可能会变为空白。我想这是真的。根据我对慢速连接的经验，页面通常保持不变，直到收到有用的东西，这可能需要几秒钟或更长时间。我认为像这样的“请稍候”消息是对用户体验的优化，即使它并不完全可靠。

标签： javascript html jquery

【解决方案1】：

对于这个答案，我提供了一个隐藏的<div>，并带有“请稍候”文本。这可以是您想要的任何样式的任何 HTML。单击按钮时，将显示等待消息并且禁用提交按钮。由于这不会等待 UI 更改发生，因此表单可能会在用户看到 Please Wait 消息之前提交。

$('form').submit(function(){
  $('#waiting').show();
  $(this).children('input[type=submit]').prop('disabled', true);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <div>Please submit the form</div>
  <input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
</form>
<div id="waiting" style="display:none">Please wait...</div>

【讨论】：

非常感谢@daddygames - 这很好用！

【解决方案2】：

您可以创建一个带有display: none; 样式的div，然后在触发提交时显示它。

<div style="display: none;" id="please_wait" class="text-center">
    <p>Please Wait...</p>
</div>

$('form').submit(function (e) { 
    $(this).children('input[type=submit]').prop('disabled', true);
    $('#please_wait').show();
});

【讨论】：