Barre de chargement pendant envoi de formulaire

16 mars 2006, 12:13

Bonjour tout le monde,

J'ai un formulaire, par lequel j'upload une video sur un serveur. Suivant le poids de cette video, le chargement peut prendre un certain temps.

Mon idée est simple :

lors que l'utilisateur clique sur le submit, j'aimerais afficher une barre de chargement (qui sera surement un .gif animé), et qui se repetera, tant que le chargement n'est pas fini, et que le navigateur charge la page suivante.

J'ai pensé que cela pouvait etre faisable en JS. Existe t'il un moyen de faire cela ?

par exemple un onClick qui apelle une fonction JS qui affichera cette image sur la page.

16 mars 2006, 13:38

Tu réponds toi-même à tes questions

Personnellement j'utilise ce genre de code (les fonctions AjaxRequest, Element.setStyle, Form.enable et Form.disable utilisées viennent de la librairie Prototype) :

<script type="text/javascript">
function sendRequest()
{
  new AjaxRequest("serveur.php", { onSuccess:ajaxSuccess });
  Form.disable("monFormulaire");
  Element.setStyle("monImageDeChargement", {display:"inline"});
}

function ajaxSuccess(req)
{
  alert(req.responseText);
  Element.setStyle("monImageDeChargement", {display:"none"});
  Form.enable("monFormulaire");
}
</script>

<img src="loading.gif" id="monImageDeChargement" style="display:none" />

<form id="monFormulaire" onsubmit="sendRequest(); return false">
  <input type="submit" />
</form>

16 mars 2006, 15:03

Sans aller jusqu'à l'utilisation d'Ajax comme te le propose Naholyr (même si c'est le must

), je te proposerai plutot d'utiliser une div cachée (display="non") avec le bon z-index contenant ton image gif (display="block") dans ton document et de la montrer lors du submit d'upload via l'évènement onCLick par exemple.

16 mars 2006, 15:24

Ok, effectivement, ça m'a l'air pas mal comme concept ça.

Tu réponds toi-même à tes questions

hihi

16 mars 2006, 16:06

Désolé pour la mention à Ajax, j'ai compliqué pour rien j'avais cru comprendre que c'est ce que tu souhaitais mais ton message était pourtant bien clair. Du coup le code est un peu plus simple

<script type="text/javascript">
function submitForm(f)
{
  // ici quelques vérifications des champs du formulaire, en cas
  // d'erreur afficher une alerte et retourner false.
  Form.disable(f);
  Element.setStyle("monImageDeChargement", {display:"inline"});
  return true;
}
</script>

<img src="loading.gif" id="monImageDeChargement" style="display:none" />

<form id="monFormulaire" onsubmit="return submitForm(this)">
  <input type="submit" />
</form>

18 mars 2006, 17:17

j'ai essayé, en simplifiant encore un peu, mais j'ai un message d'erreur JS :

Code : Tout sélectionner

<script type="text/javascript"> 
function submitForm() 
{ 
  Element.setStyle("monImageDeChargement", {display:"inline"}); 
  return true; 
} 
</script> 
<img src="loading.gif" id="monImageDeChargement" style="display:none" /> 
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form" method="post" enctype="multipart/form-data">
...
<input name="sub" value="Envoyer" type="submit" onClick="javascript:submitForm()">
</form>

'Element' est indéfini.

qu'est ce que cela veut dire ?

19 mars 2006, 19:27

... (les fonctions AjaxRequest, Element.setStyle, Form.enable et Form.disable utilisées viennent de la librairie Prototype) ...

21 mars 2006, 11:38

J'ai installé la lib Prototype, et collé le fichier prototype.js dans mon repertoire, mais y'a plusieur problemes :

L'image s'affiche, mais pendant une fraction de seconde, puis disparait.
Et le formulaire ne se soumet pas. Il s'efface, affiche l'image pendant une fraction de seconde, puis re-apparait, mais rien.

En bidouillant, j'ai reussi a afficher l'image, mais elle est statique, alors que c'est un .gif animé.

Code : Tout sélectionner

function submitForm(f) 
{ 
  // ici quelques vérifications des champs du formulaire, en cas 
  // d'erreur afficher une alerte et retourner false. 
  Form.disable(f);
  Element.setStyle("monImageDeChargement", {display:"inline"});
  return true; 
} 
</script> 

<img src="design/loading.gif" id="monImageDeChargement" style="display:none" />

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" id="monFormulaire" onsubmit="return submitForm(this)">
...
</form>

Barre de chargement pendant envoi de formulaire

Qui est en ligne