单击提交按钮时如何放置进度光标答案

【问题标题】：How can i put a progress cursor when Submit button clicked单击提交按钮时如何放置进度光标
【发布时间】：2015-01-26 20:36:48
【问题描述】：

如何在我的代码中添加进度光标，以通知用户在点击提交按钮或上传多个文件时等待上传按钮？这是我的表格：

<form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple="multiple" accept="*">
        <input type="submit" value="Ανέβασμα Αρχείων">


    </form>

    <form action="execute.php" method="post" >
        <input type="submit" value="Εκτέλεση ελέγχου">

    </form>

【问题讨论】：

标签： javascript jquery css html forms

【解决方案1】：

将此属性添加到您的提交按钮：

onclick="function(){document.body.style.cursor='wait'}"

（显然在边缘，你必须添加void like onclick="void function(){document.body...）

所以它应该是这样的：

<input type="submit" value="Εκτέλεση ελέγχου" onclick="function(){document.body.style.cursor='wait'}">

现在，当您要重置光标时，请使用以下代码：

document.body.style.cursor = 'default';

基本上，

document.body.style.cursor='wait' // loading cursor

使指针看起来像是在加载，并且

document.body.style.cursor = 'default'; // normal cursor

重置它。

将这些与您的上传功能结合使用，这样您就可以让按钮 onclick 将其设置为等待光标，然后在您的上传功能完成后将其重新设置。

【讨论】：

【解决方案2】：

您可以在点击提交按钮时加载进度光标，如下所示。

<div id="progressMessage" style="display:none; padding:5px; border:1px Solid #000">
        <div id="activityIndicator">&nbsp;</div>
        <label style="font:bold; display:block; padding:5px; text-align: centre;"
             id="progressMessageLbl">Loading...</label>
    </div>
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="multiple" accept="*">
    <input type="submit" value="Ανέβασμα Αρχείων" onclick="showProgressCursor();">
</form>

<form action="execute.php" method="post" >
    <input type="submit" value="Εκτέλεση ελέγχου" onclick="showProgressCursor();">

</form>

JavaScript 代码

function showProgressCursor()
{
   $("#progressMessageLbl").html("Loading....");
   $("#progressMessage").show();
}

CSS

 #progressMessage
 {
    position:absolute;
    top:45%;
    left:25%;
    width:50%;
    z-index:3000;
 }

 #activityIndicator 
 {
   height: 32px;
   width: 32px;
   -webkit-background-size: 32px 32px;
   -o-background-size: 32px 32px;
   -moz-background-size: 32px 32px;
   background-size: 32px 32px;
   margin: 0px auto;
   background-image: url("activity_indicator.gif");
   background-color: transparent; 
}

【讨论】：

那不是光标，那是加载轮。
@yashika Javascript 代码必须在 .js 文件中，或者我可以把它放在标签中吗？
你也可以放入脚本标签。
您能否检查元素并告诉我，您遇到了什么错误？
我将 Javascript 代码放入表单末尾的

【解决方案3】：

在提交或更新表单时，您必须向服务器发送一些请求，您可以使用 jquery 延迟对象了解已发送请求的状态，根据该状态控制进度光标的显示或隐藏。

【讨论】：