loading gif sur clic bouton submit [Résolu]

hhm2007 · 23/05/2011, 11h24

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 :

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

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

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

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

andry.aime · 23/05/2011, 11h48

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+.

hhm2007 · 23/05/2011, 15h12

Hello et merci pour la réponse.

J'ai preloadé l'image :

Code :

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

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

et supprimé le:

Code :

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

$(this).submit();

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

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

Code :

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

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.

andry.aime · 23/05/2011, 15h55

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+.

Bovino · 23/05/2011, 15h58

Citation:

Code :

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

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 ?

hhm2007 · 25/05/2011, 18h07

Hello,

Alors on avance

Voilà le bout de code:

Code :

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

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 :

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

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

hhm2007 · 25/05/2011, 19h42

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

Code :

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

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

andry.aime · 25/05/2011, 19h49

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

Citation:

hhm2007 · 25/05/2011, 21h12

yep yep yep yep yep

23/05/2011, 15h55	#4
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 270 Points : 7 270	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+.
	00

25/05/2011, 21h12	#9
hhm2007 Invité régulier Inscription : mai 2007 Messages : 23 Détails du profil Informations forums : Inscription : mai 2007 Messages : 23 Points : 6 Points : 6	yep yep yep yep yep
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email