Discussion :

[Robjerey]

Bonjour.

Je dispose d'un formulaire HTML, donc le code très simplifié est le suivant:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[kakashi99]

Salut,

le problème d'une barre de progression c'est qu'il faut un référentiel... est-ce que le traitement prend TOUJOURS le même temps ? parce que sinon, une fois lancer le traitement, comment tu vas savoir que tu as fait x% ?
mieux vaut mettre le bouton en "disabled" un fois que tu as cliqué dessus et afficher un truc du genre : spin.js


dans tous les cas, le lancement de la fonction progress() se fera sur le onsubmit du form.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form action="action.php" method="post" onsubmit="progress()">

[Bovino]

Quand tu soumets un formulaire, le navigateur va

• fermer le document en cours ;
• appeler la page indiquée dans l'attribut action du formulaire ;
• attendre une réponse du serveur ;
• une fois la réponse reçue du serveur, ouvrir un nouveau document ;
• afficher la réponse reçue.

Bref, lorsque tu attends la nouvelle page, il n'y a aucun document actif et donc nulle part où afficher une barre de progression.
Donc ce que tu souhaites est impossible à faire lors d'une transaction "classique".
Ce serait à la rigueur possible si la soumission se faisait par une requête AJAX, mais dans ce cas se poserait le problème soulevé par kakashi99 :

comment tu vas savoir que tu as fait x% ?