Menu déroulant click sur enfants

**freye** · 20/11/2012, 15h29

Bonjour
Je débute en langages... je voudrais que, lorsqu'on clique sur la div1 se déroule la div2 contenant le formulaire de contact et que lorsqu'on clique à nouveau sur la div1, la div2 se referme. Cela fonctionne bien avec le code jquery ci-dessous. Sauf que lorsque l'on clique sur "envoi" la div 2 se referme automatiquement !! Et je voudrais éviter cela. Je n'arrive pas à régler ce problème. Merci de votre aide...

Code HTML :

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
       <body>
 
	   <div class="div1">
		CONTACT
	   </div>
 
		<div class="div2">
			<form method="post"  id="forme" >
			<label for="Votre message" > Message  </label><br/>
 
			<textarea name="message" id="com"  > </textarea><br/>
			<input type="submit" value="Envoyer" id="envoi">
			</form>
		</div>
 
  </body>

Code CSS :

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

1
2
3
 
.div2{display:none;}
.div1{cursor:pointer;}

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
$(function(){
 
$(".div1").click(function(){
$(".div2").slideToggle(100);
});
 
});

**SpaceFrog** · 20/11/2012, 15h36

Le click sur le bouton de submit se propage ...
il suffit de stopper la propagation

Code :

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

1
2
3
4
5
6
7
8
$(function(){
 
$(".div1").click(function(){
$(".div2").slideToggle(100);
});
 
$("#envoi").click( function(e){ e.stopPropagation();})
});

**Bovino** · 20/11/2012, 15h37

Lorsque tu cliques sur un bouton submit, le formulaire est envoyé et la page rechargée.
JavaScript n'est donc pas la solution...

Tu pourrais tester côté serveur si le formulaire a été envoyé et dans ce cas, afficher div2, sinon, la masquer.

**SpaceFrog** · 20/11/2012, 15h43

c'est une autre possiblilité Beef
du coup il faut inhiber l'envoi du form également

**DrDarko** · 20/11/2012, 15h44

Bonjour,

C'est plus ou moins une question et une réponse (s'il vous plait ne me fouettez pas si je dis une bêtise) peut être qu'il pourrait utiliser sur son formulaire "onsubmit" avec une fonction qui renverrait false tout en envoyant le formulaire de manière manuelle...?

**freye** · 20/11/2012, 16h00

Merci pour vos réponses. j'ai essayé ta solution, apparemment le problème persiste...

Envoyé par SpaceFrog

Le click sur le bouton de submit se propage ...
il suffit de stopper la propagation

Code :

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

1
2
3
4
5
6
7
8
$(function(){
 
$(".div1").click(function(){
$(".div2").slideToggle(100);
});
 
$("#envoi").click( function(e){ e.stopPropagation();})
});

**freye** · 20/11/2012, 16h00

Merci pour la réponse

Envoyé par Bovino

Lorsque tu cliques sur un bouton submit, le formulaire est envoyé et la page rechargée.
JavaScript n'est donc pas la solution...

Tu pourrais tester côté serveur si le formulaire a été envoyé et dans ce cas, afficher div2, sinon, la masquer.

Tu veux dire en employant du php ?

**Bovino** · 20/11/2012, 16h09

Spaffy, sauf erreur de ma part, le but n'est pas d'empêcher d'envoyer le formulaire, mais de retrouver la div affichée après l'envoi.

freye, oui, c'est ça, avec PHP, du style

Code php :

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

1
2
$display = isset($_POST['message') ? '' : 'none';
echo '<div id="div2" style="display="'.$display.'">';

**DrDarko** · 20/11/2012, 16h47

Bovino est ce que tu peux juste me dire si la méthode que j'avais en tête est possible et dans l'optique qu'elle est réalisable est ce qu'elle est pertinente...?

**Bovino** · 20/11/2012, 16h58

Oui, ta solution est envisageable.
Au lieu de soumettre directement le formulaire (qui implique un rechargement de la page), tu peux te contenter d'inhiber la soumission classique et d'appeler via AJAX une page de traitement des éléments du formulaire que tu passerais en paramètre.

**DrDarko** · 20/11/2012, 17h05

Merci.

**SpaceFrog** · 20/11/2012, 17h27

tu peux te contenter d'inhiber la soumission classique et d'appeler via AJAX

clairvoyance ?

**Bovino** · 20/11/2012, 17h36

C'est-à-dire ?

**SpaceFrog** · 21/11/2012, 08h30

Envoyé par spaceforg

du coup il faut inhiber l'envoi du form également

Envoyé par Beef

Spaffy, sauf erreur de ma part, le but n'est pas d'empêcher d'envoyer le formulaire,

Envoyé par Beef

tu peux te contenter d'inhiber la soumission classique et d'appeler via AJAX

prémonition ? :mrgeein:

**freye** · 21/11/2012, 18h28

Le niveau me depasse un peu, je pensais que c'était plus simple que ça, je crois que je vais m'orienter vers une autre forme de présentation.
Merci quand même

Menu déroulant click sur enfants

jQuery

Discussions similaires

Partager

Partager