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

Posted 2023-05-09

【中文标题】单击提交按钮时如何放置进度光标

【英文标题】：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>

【参考方案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 延迟对象了解已发送请求的状态，根据该状态控制进度光标的显示或隐藏。