HTML表单提交后如何向用户展示“请稍候”提示或模态框？

实现逻辑 #

在原有禁用提交按钮的逻辑基础上，提交事件触发时同步显示预设的提示元素即可，以下提供两种常用实现方式：

方式1：简单内联提示 #

无需遮罩，仅在提交按钮旁显示提示文字

HTML部分（新增提示容器） #

<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
<!-- 新增默认隐藏的提示容器 -->
<span id="loading-tip" style="display: none; margin-left: 12px; color: #666;">请稍候，页面加载中...</span>

JS提交事件调整 #

$('form').submit(function(){
   $(this).children('input[type=submit]').prop('disabled', true);
   // 显示加载提示
   $('#loading-tip').show();
});

方式2：全屏遮罩模态框 #

可屏蔽用户提交后的其他操作，提示更醒目

HTML部分（新增模态框结构） #

<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
<!-- 新增默认隐藏的加载模态框 -->
<div id="loading-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; color: #fff; font-size: 20px;">
  请稍候，正在提交您的请求...
</div>

JS提交事件调整 #

$('form').submit(function(){
   $(this).children('input[type=submit]').prop('disabled', true);
   // 显示全屏模态框
   $('#loading-modal').css('display', 'flex');
});

补充说明 #

• 可自行调整提示元素的CSS样式自定义展示效果，比如添加加载动画、修改文字内容、调整颜色等
• 表单提交后页面会跳转新页面，原有页面的提示元素会随页面跳转自动消失，无需额外编写隐藏逻辑

内容的提问来源于stack exchange，提问作者Muriel