loading gif sur clic bouton submit

Invité · 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

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

Invité · 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

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 ?

Invité · 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

Invité · 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

Invité · 25/05/2011, 21h12

yep yep yep yep yep

loading gif sur clic bouton submit

JavaScript

Discussions similaires

Partager

Partager