[HTML + JS] gif animé à la validation d'un formulaire + pb IE

Version imprimable

Bonjour à tous, mon problème :
Je veut afficher un gif animé (loading.gif) à la validation de mon formulaire.
Tout fonctionne bien sauf sur IE ou mon gif animé n'est pas animé ;)

Quelques morceaux de mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <head> function afficherLoading() { $('loading').style.display='block'; $('liste_contact').style.display='none'; document.form.submit(); } </head> <body> <div id='loading' style='display:none'><img src='/config/img/loading.gif'></div> <form action='' method='post' name='form'> <input type='button' value='Inviter mes amis' onclick='afficherLoading()'> </form> </body>
J'ai essayé de mettre le afficherLoading() dans le onsubmit de la balide form et du coup d'enlever le submit dans la fonction afficherLoading et de mettre un type='submit' sur mon bouton de formulaire. J'ai aussi essayer de creer en DOM mon image loading ... mais rien.

Quelqu'un aurait une idée ? Merci d'avance

10/12/2008, 18h16
Auteur

bonjour,

essaye ce code. Il s'agit de charger l'image gif après l'envoi du formulaire.
10/12/2008, 18h17
Bisûnûrs

Ca vient peut-être aussi de la configuration de ton navigateur :

Outils > Options Internet > Avancés > Multimédia > Cocher "Lire les animations dans les pages Web"

Merci auteur, il suffisait de soumettre le formulaire et d'affiché l'image ensuite :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<head>	
function afficherLoading()
{
     document.form.submit();
     $('loading').style.display='block';	
     $('liste_contact').style.display='none';
}
</head>
<body>
<div id='loading' style='display:none'><img src='/config/img/loading.gif'></div>
<form action='' method='post' name='form'>
<input type='button' value='Inviter mes amis' onclick='afficherLoading()'>
</form>
</body>

10/12/2008, 18h29
Auteur

si la réponse te satisfait n'oublie pas le tag :resolu: ;)

Ça fonctionne avec FF, mais pas avec IE7 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>New Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
<script type="text/javascript">
function afficherLoading()
{
     document.forms[0].submit();
     document.getElementById('img').style.display='block';      
}
</script>
</head>
<body>
<?php
 if(isset($_POST)) sleep(3);
?>
 
<form method="post" action="" onsubmit="return false;">
<input type="submit" onclick="afficherLoading();"/>
</form>
<img id="img" src="sablier.gif" alt="" style="display:none;"/>
</body>
</html>

arf, et moi qui pensait que ça allait résoudre ton problème :?

Et comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>New Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 
<script type="text/javascript">
function gestionGif()
{
  document.getElementById("image").src = "sablier.gif";
}
 
function envoiFormulaire()
{
  document.getElementById("formulaire").submit();
}
</script>
 
<body>
 
<?php
 if(isset($_POST)) sleep(3); // simule la durée du traitement du formulaire
?>
 
 
  <form id="formulaire" method="post" action="" onsubmit="gestionGif()">
    <input type="button" onclick="envoiFormulaire();gestionGif()"/>
  </form>
 
  <img id="image" src="sablier.gif" alt=""/>  
 
</body>

le src de l'image est déterminé lors de l'envoi du formulaire

Je vais regarder ça de plus près.
En tous les cas Merci ! ;)

[EDIT] Oui! ça fonctionne!
Bravo :yaisse2:

On peut simplifier comme ça aussi, ça fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>New Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 
<script type="text/javascript">
function envoiFormulaire(){
  document.forms[0].submit();
  var obj=document.getElementById("image");
  if(obj) obj.src=obj.src;
}
</script>
 
<body>
 
<?php
 if(isset($_POST)) sleep(3); // simule la durée du traitement du formulaire
?>
 
  <form method="post" action="">
    <input type="button" onclick="envoiFormulaire();"/>
  </form>
 
  <img id="image" src="sablier.gif" alt=""/>  
 
</body>

J'envisageais d'utiliser un timer lancé après le submit pour recharger l'image...
Mais ta solution est plus efficace. Merci !

11/12/2008, 10h36
Auteur

:arrow: A ajouter dans la FAQ ?

Sachant que je me suis inspiré de ce qui a été écrit ici :
http://www.webdeveloper.com/forum/sh...389#post867389

Attendons un peu avant de proposer le code pour la FAQ,
il peut encore être optimisé, par exemple j'ai vraiment besoin d'utiliser un bouton de type submit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>New Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 
<script type="text/javascript">
function envoiFormulaire(form){
  form.submit();
  var obj=document.getElementById("image");
  if(obj) obj.src=obj.src;
  return false;
}
</script>
 
<body>
  <img id="image" src="sablier.gif" alt=""/>  
 
  <form method="post" action="" onsubmit="return envoiFormulaire(this);">
    <input type="submit"/>
  </form>
 
 
<?php
 if(isset($_POST)) sleep(3);
?>
 
</body>

L'avantage, c'est que mon formulaire fonctionnera même si JS est désactivé.

Bon maintenant, on a un code nickel et qui n'a plus rien à voir avec celui de webdevelopper... ;)

On pourrait aussi facilement afficher/masquer l'image et le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>New Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 
<script type="text/javascript">
function envoiFormulaire(form){
  form.submit();
  form.style.display='none';
  var obj=document.getElementById("image");
  if(obj){
    obj.src=obj.src;
    obj.style.display='block';
  }
  return false;
}
</script>
 
<body>
  <img id="image" src="sablier.gif" alt="" style="display:none;"/>  
 
  <form method="post" action="" onsubmit="return envoiFormulaire(this);">
    <input type="submit"/>
  </form>
 
 
<?php
 if(isset($_POST)) sleep(3);
?>
 
</body>

11/12/2008, 14h33
Sub0

Ajoût de la solution dans le forum "Contribuez" de Javascript :
http://www.developpez.net/forums/d65...formulaire-ie/

:resolu: