时间戳

首页 > 解决方案 > 如何在 HTML 中提交表单后向用户显示“请稍候”消息

javascript - 如何在 HTML 中提交表单后向用户显示“请稍候”消息

问题描述

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

这是我的代码：

<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);
 });

标签： javascripthtmljquery

解决方案

对于这个答案，我提供了一个隐藏<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>

推荐阅读