How can i put a progress cursor when Submit button clicked

Question

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>

Answer 1

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.