loading gif sur clic bouton submit

Version imprimable

Hello,

J'essaye à travers un formulaire d'afficher un loading.gif de chargement lorsqu'on clic sur un bouton submit.

J'ai trouvé le bout de code suivant, mais il semblerait que quelque chose bloque.

Si je garde le id="form33" dans mon formulaire, je vois bien le loading.gif qui s'affiche à la place du bouton submit, mais rien ne se passe, le formulaire ne s’exécute pas.
Si je supprime le id="form33", je ne vois plus le loading gif, mais cette fois le formulaire est exécuté et je suis redirigé vers ma page ping2.php

Code:
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> function EnvoiMessage() { $(this).submit(); document.getElementById('form33').innerHTML = '<img src="img/loading.gif" alt="Loading..." />'; } </script>
Code:
Code:

1 2 3 4 5 6 <form id="form33" action="ping2.php" method="post"> <p> <input type="hidden" id="router_ip" name="router_ip" value="<?php echo $donnees['router_ip']; ?>" /> <input type="submit" name="submit" id="submit" onclick="EnvoiMessage()" value="Ping"/> </p> </form>
Quel est l'erreur ?
Comment faire pour que les 2 actions soient exécutées en même temps ?

Merci pour l'aide

23/05/2011, 11h48
andry.aime

Bonjour,

Vu que c'est un bouton submit, vire ce bout de code

Citation:

$(this).submit();

Si tu fait innerHTML avec ton formulaire, tu ne pourras rien envoyer. Ce que tu dois faire c'est cacher le formulaire avec un div au-dessus qui va afficher l'image.
Tu dois aussi précharger l'image "loading.gif".

A+.

Hello et merci pour la réponse.

J'ai preloadé l'image :

Code:

<body onload="MM_preloadImages('img/button_menu1_bis.png','img/button_menu2_bis.png','img/loading.gif')">

et supprimé le:

Code:

$(this).submit();

ceci dit je comprends pas exactement le procédé que tu propose,

est-ce que c'est un truc du genre:
Code:

1 2 3 4 5 6 7 8 <div id="form33"> <form action="ping2.php" method="post"> <p> <input type="hidden" id="router_ip" name="router_ip" value="<?php echo $donnees['router_ip']; ?>" /> <input type="submit" name="submit" id="submit" onclick="EnvoiMessage()" value="Ping"/> </p> </form> </div>
mais ca change rien, mon loading.gif s'affiche mais pas d'éxecution du formulaire.

23/05/2011, 15h55
andry.aime

Salut,

Non, c'est pas comme ça,
Crées deux div qui se superpose, l'un contenant le formulaire et l'autre l'image qui sera caché au début et l'afficher au moment du submit et qui sera au-dessus de l'autre qui contient le formulaire.

A+.
23/05/2011, 15h58
Bovino

Citation:

Code:

document.getElementById('form33').innerHTML = '<img src="img/loading.gif" alt="Loading..." />';

Si tu remplaces le contenu du formulaire par une image, que veux-tu pouvoir transmettre au serveur ? :aie:

Hello,

Alors on avance :)

Voilà le bout de code:
Code:

1 2 3 4 5 <script type="text/javascript"> function EnvoiMessage() { document.getElementById('form33').innerHTML = '<img src="img/loading.gif" alt="Loading..." />'; } </script>
avec
Code:

1 2 3 4 5 6 7 <div id="form33"></div> <form action="ping2.php" method="post"> <p> <input type="hidden" id="router_ip" name="router_ip" value="<?php echo $donnees['router_ip']; ?>" /> <input type="submit" name="submit" id="submit" onclick="EnvoiMessage()" value="Ping"/> </p> </form>
Donc cette fois-ci j'ai bien mon div id="form33" qui est caché et qui apparait une fois que je clic sur mon submit.

petit souci, mon gif n'est plus animé, il reste figé avant de passer à la page suivante (ping2.php)

Why ?

Merci

C'est bon j'ai reglé mon histoire avec :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Un bouton avec '+' dedans, et un onclick qui appelle une fonction avec -->
<!-- en param le bouton et l'id du div à afficher/masquer. -->
<button type="button" onclick="toggle_div(this,'id_du_div');">+</button>
 
<!-- Un div caché avec un attribut id -->
<div id="id_du_div" style="display:none;">
Yop yop yop yop yop yop yop yop
</div>
 
<!-- Le JS... -->
<script type="text/javascript">
function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
  var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
  if(div.style.display=="none") { // Si le div est masqué...
    div.style.display = "block"; // ... on l'affiche...
    bouton.innerHTML = "-"; // ... et on change le contenu du bouton.
  } else { // S'il est visible...
    div.style.display = "none"; // ... on le masque...
    bouton.innerHTML = "+"; // ... et on change le contenu du bouton.
  }
}
</script>

Encore merci à vous pour l'aide ;)

25/05/2011, 19h49
andry.aime

J'aimerai bien voir ce div si tu l'affiche

Citation:

<div id="id_du_div" style="display:none;">
Yop yop yop yop yop yop yop yop
</div>

:ptdr:
25/05/2011, 21h12
Invité

yep yep yep yep yep

:mouarf: :ccool: