Image qui apparait après clique sur bouton submit

Bonjour,

J'ai un petit formulaire :

<div id="DIVloading"> </div>
<form action="" method="post" enctype="multipart/form-data">
Votre fichier vidéo : <input name="file" type="file" />
<input type="submit" id="submit" onclick="document.getElementById('DIVloading').innerHTML = '<img src=http://www.aquariophilie.org/aquascaping/images/loading.gif />Chargement ...'" value="Envoyer la vidéo" />
</form>

Le but est d'afficher une petite animation (gif) et le mot "Chargement ..." après avoir cliqué sur le bouton submit.
Il doit y avoir un soucis avec mon code car seul le mot "Chargement ..." apparait.

Avez vous une p'tite idée ?

Il te manque les guillemets pour la source de ton image ...
Pense à utiliser Firebug ou tout autre outil pour ce genre d'erreur.

Merci pour la réponse vincentD83 ... j'ai essayé d'entourer l'adresse de l'image par des simples quote ' ou des double " mais dans les 2 cas ca ne fonctionne pas

Je pense que c'est à cause de l'utilisation des ' et " dans ma ligne ...

<input type="submit" id="submit" onclick="document.getElementById('DIVloading').innerHTML = '<img src=http://www.aquariophilie.org/aquascaping/images/loading.gif />Chargement ...'" value="Envoyer la vidéo" />

mais alors comment faire ?

Merci pour l'astuce de Firebug, je ne connais pas, ca a l'air un peu compliqué pour moi

<img src=\'http://www.aquariophilie.org/aquascaping/images/loading.gif\' alt=\'\' />

ou

<img src=\"http://www.aquariophilie.org/aquascaping/images/loading.gif\" alt=\"\" />

Bonjour,

Merci pour votre aide mais ca ne fonctionne toujours pas

ni avec \' ni avec \" ...
avec \" c'est l'événement onclick qui bug (affichage tronqué de la balise input type="submit") et avec \' l'image ne s'affiche pas, seul le texte "Chargement ..." apparait après avoir cliqué !

Il doit y avoir un truc !?

Ce n'est pas l'élément innerHTML qui n'affiche que du texte et refuse d'afficher la balise <img /> ?

Par avance merci

Bonjour,
Ce code-ci est exact :

... onclick="document.getElementById('DIVloading').innerHTML = '<img src=\'http:\/\/www.aquariophilie.org\/aquascaping\/images\/loading.gif\' />Chargement ...'" ...

A mon avis, le fait que tu ne voies pas le gif, c'est tout simplement qu'il n'a pas le temps d'apparaître. Comme il n'est rien précisé à action="" (donc aucune action exécutée) et qu'en plus l'image est téléchargée depuis un autre site, l'animation n'a pas le temps matériel de se lancer, surtout si le fichier vidéo ne pèse pas très lourd.

Il faudrait essayer avec un gif sur ton site, et surtout avec un upload effectif du fichier vidéo!
Cordialement!

Re-bonjour

... ca marche toujours pas ... comprend vraiment pas

J'ai ajouté les antislashes devant les \ dans l'url de l'image mais ca ne marche toujours pas !

Alors voici la ligne exacte de mon code :

<input type="submit" id="submit" onclick="document.getElementById('DIVloading').innerHTML = '<img src=\'\/aquascaping\/images\/loading.gif\' alt=\'Chargement ...\' />Chargement ...'" value="Envoyer la vidéo" />

Vous confirmez qu'elle est bien exacte ?

Pour infos, il y a bien une action, je l'avais retiré pour ne pas vous l'a montrer car je pensais que ca n'avait pas d'influence sur l'affichage d'un gif !
Voilà ma ligne action exacte de mon code :

<form action="<?php print $postUrl.'?nexturl='.$nextUrl; ?>" method="post" enctype="multipart/form-data">

Je confirme que le gif est bien sur mon site (malgré l'url absolue) et que chaque tests est effectué avec une vidéo avi de 16 Mo. Au passage la vidéo est bien envoyé par le formulaire et bien enregistré.

Un printscreen de ce que ca donne.

Vous avez une autre idée sur ce paradoxe !? C'est dingue de ne pas réussir à afficher un simple gif quand on clique sur le bouton submit ... j'suis vraiment pas doué !
Modifié par Nicolas-Asso (10 Oct 2011 - 19:27)

Nicolas-Asso a écrit :
Au passage la vidéo est bien envoyé par le formulaire et bien enregistré.

C'est l'essentiel, non? Tant pis pour le plaisir de voir tourner la petite roue .

Désolé, mais je ne vois pas où ça coince ...

Oui c'est vrai que c'est l'essentiel que la vidéo soit bien uploadé mais il ne faut surtout pas que l'utilisateur ferme la page ... c'est pour ca que je voulais mettre une animation.

... grande nouvelle mon gif s'affiche ! J'ai simplement ajouté un ID bidon sur la balise <img /> et déplacé la DIV qui l'affiche juste avant </form>.
Je ne sais pas laquelle de ces 2 modifications a fait afficher l'image.

Nouveau soucis ... mon gif ne s'anime qu'une seconde !!! Apparemment c'est un problème connu qui a un rapport avec un paramètre setTimeout ... je le met ou ce truc dans ma ligne !?

Une nouvelle fois merci à tous ceux qui m'ont aidé
Modifié par Nicolas-Asso (10 Oct 2011 - 23:07)