Barre de progression pour le chargement d'un formulaire
Bonjour.
Je dispose d'un formulaire HTML, donc le code très simplifié est le suivant:
Code:
1
2
3
4
| <form action="action.php" method="post">
<input id="Text1" type="text" />
<input id="Submit1" type="submit" value="submit" />
</form> |
Quand on clique sur le bouton "submit", il y a un long chargement avant de voir apparaitre le résultat sur la page.
Malheureusement, pendant ce long chargement, on peut cliquer à nouveau plusieurs sur le bouton "submit"...
Je souhaiterais donc afficher une barre de progression pendant ce long chargement et faire en sorte que le clic sur le bouton "submit" ne fonctionne plus.
Par exemple :
Code:
1
2
| <progress id="barre-progression" max="100" value="0" onload="Progress();"></progress>
<span id="lbl-avancement">0 %</span> |
Et un code JavaScript pour animer cette barre de progression qui pourrait par exemple ressembler à ceci :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| function Progress(){
var valeurAvancement = 0;
var barreProgression = document.getElementById('barre-progression');
var avancement = document.getElementById('lbl-avancement');
valeurAvancement +=5;
if(valeurAvancement <= barreProgression.max){
barreProgression.value = valeurAvancement;
avancement.innerHTML = valeurAvancement.toString() + ' %';
setTimeout('Progress()', 500);}
else{
clearTimeout();
}
} |
Pourriez-vous, s'il vous plait, m'aider à résoudre les problématiques suivantes:
Quel code JavaScript, à mettre dans la fonction Progress(), permet de détecter l'état d'avancement du chargement du résultat du formulaire?
Quel événement faut-il utiliser, dans la balise HTML <progress>, pour lancer la barre de progression? (Est-ce onload?)
Merci.
