防止重复提交，提交后出现等待画面

最新推荐文章于 2022-07-27 17:10:26 发布

lele521

最新推荐文章于 2022-07-27 17:10:26 发布

阅读量132

点赞数

分类专栏： javascript

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种通过显示等待画面来防止网页表单重复提交的方法。该方法利用JavaScript在提交表单前展示一个模态对话框，对话框中包含加载指示器及提示信息，能够有效避免用户因误操作而导致的数据重复提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防止重复提交，提交后出现等待画面
++++++++++++++++++++++++++++++++++++++++++++++++
在提交前执行的方法。

function witing(){
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;
divProgressDialog.style.display = "";
divProgressDialog.style.left = ((document.body.offsetWidth - divProgressDialog.offsetWidth) / 2);
divProgressDialog.style.top = ((document.body.offsetHeight - divProgressDialog.offsetHeight) / 2);
}

页面代码添加。

<DIV STYLE="FONT-SIZE: 8pt; Z-INDEX: ? FONT-FAMILY: Tahoma;
POSITION: absolute; DISPLAY: none;
CURSOR: default" ID="divProgressDialog" dir="ltr">
<IMG src="../images/indicator_big.gif">
<DIV STYLE="PADDING: 3px;FONT-WEIGHT: bolder;COLOR:rgb(255, 0, 0)">
请稍等！正在加载数据。。。
</DIV>
</DIV>
<DIV ID="divModal"
STYLE="BORDER-TOP: white 1px groove;
PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface;
TEXT-ALIGN: center; BACKGROUND-COLOR: white;
FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
absolute; TOP: 1px; Z-INDEX: 3">
</DIV>