How can i add to my code a progress cursor to inform the user to wait when he clicks the Submit button or the Upload Button when uploads many files? Here is my form:

<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>

How can i add to my code a progress cursor to inform the user to wait when he clicks the Submit button or the Upload Button when uploads many files? Here is my form:

<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

3 Answers 3

Add this attribute to your submit button:

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

(Apparently in edge, you have to add void like onclick="void function(){document.body...)

So it should look like:

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

Now, when you want to reset the cursor, use this code:

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

Basically,

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

makes the pointer look like it's loading, and

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

resets it.

Use these in conjunction with your uploading functions, so you could have the button onclick set it to a waiting cursor, and then, when your uploading function has finished, set it back.

You can load Progress Cursor on click of submit button as below.

<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 Code

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

While submitting or updating the form, you must be sending some request to server, you can use jquery deferred objects to know the status of request sent, on basis of that status, control showing or hiding of your progress cursor.