jquery animation d'un formulaire

**lolaalol** · 19/11/2012, 21h16

Bonjour tout le monde, j'ai un texte dans une page, lorsque j'appuie sur un button je veux que mon formulaire vienne couvrir le texte de la page tout en laissant paraitre le texte derrière ("opacity"). Le problème est que dans mon formulaire j'ai un button de validation et lorsque j'appuie sur mon button dans mon formulaire, mon <div> du formulaire disparaît.

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
	<title>Exercise Jquery</title>
	<link rel="stylesheet" type="text/css" href="letext.css" />
<script src="jquery.js"></script>
<script>
	$(document).ready(function()
	{
	  var result = true;
	  $("#formulaire").click(function()
	  {
		$("#panel").slideToggle().css("opacity","0.9");
	  });
 
	  	  $("validation").click(function(){
 
		if($('#firstname').val()=="")
		{
			result=false;
			$('#firstname').fadeln('fast').text('champ obligatoire');
		}
	  });
	});
</script>
</head>
 
<body>
	<button id="formulaire">Formulaire</button>
	<button id="formulaire2">Formulaire2</button>
	<div id=apDiv1>
		<p>
			Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.
			Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt per Catonem, nunc repetetur ordo gestorum.
			Nihil est enim virtute amabilius, nihil quod magis adliciat ad diligendum, quippe cum propter virtutem et probitatem etiam eos, quos numquam vidimus, quodam modo diligamus. Quis est qui C. Fabrici, M'. Curi non cum caritate aliqua benevola memoriam usurpet, quos numquam viderit? quis autem est, qui Tarquinium Superbum, qui Sp. Cassium, Sp. Maelium non oderit? Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter probitatem eius non nimis alienos animos habemus, alterum propter crudelitatem semper haec civitas oderit.
		</p>
	</div>
	<div id=panel>
		<form>
			Votre Nom: <input type="text" name="firstname" id="firstname"><br><br>
			Votre Adresse: <input type="text" name="adresse" id="adresse"><br><br>
			votre Code Postal: <input type="text" name="zipcode" id="zipcode"><br><br>
			Votre Province:
			<SELECT name="province" size="1">
				<OPTION>Alberta
				<OPTION>Colombie-Britannique
				<OPTION>Île-du-Prince-Édouard
				<OPTION>Manitoba
				<OPTION>Nouveau-Brunswick
				<OPTION>Nouvelle-Écosse
				<OPTION>Nunavut
				<OPTION>Ontario
				<OPTION>Quebec
				<OPTION>Saskatchewan
				<OPTION>Terre-Neuve-et-Labrador
				<OPTION>Territoires du Nord-Ouest
				<OPTION>Yukon
			</SELECT><br><br>
			Votre Téléphone: <input type="text" name="telephone" id="telephone"><br><br>
			Votre Adresse courriel: <input type="text" name="email" id="email"><br><br>
			<button id="test">testing</button>
			<input type="submit"  value="validation" id="valider"/>
		</form>
	</div>
</body>
</html>

le css

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
#apDiv1 {
	top:50px;
	left:50px;
	width:500px;
	height:420px;
	text-align:center;
	font-family:Times New Roman;
	background-color:#BA8419;
	position:absolute;
}
 
#panel {
	top:50px;
	left:50px;
	display:none;
	width:500px;
	height:420px;
	padding-top:50px;
	padding-left:25px;
	background-color:#e5eecc;
	position:absolute;
}

**NoSmoking** · 19/11/2012, 21h42

Bonsoir,
le comportement est le comportement normal d'une soumission de formulaire par appui sur un INPUT de type submit.

Code :

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

<input type="submit"  value="validation" id="valider"/>

seulement dans ta fonction tu parles de

Code :

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

$("validation").click(function(){

et tu ne géres pas les erreurs potentielles d'ou la soumission sera systématique.

**lolaalol** · 19/11/2012, 21h46

Je me doutais un peu de cela, c'est pour sa que dans mon formulaire j'ai rajouté un autre button bidon

Code :

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

<button id="test">testing</button>

et même quand je click sur ce button, mon formulaire disparaît.

**NoSmoking** · 19/11/2012, 21h56

Dans une FORM un BUTTON est par défaut de type submit.

**lolaalol** · 19/11/2012, 21h59

Ah d'accord, je ne savais pas ça. Il y a t-il un moyen de changer cela ?

**NoSmoking** · 19/11/2012, 22h06

mets un <button type="button" ... ou un <input type="button".

Mais il me semble que le mieux serait de ne pas avoir de bouton Testing et de gérer les erreurs dans la fonction, enfin c'est comme cela que cela se fait en règle générale.

nota: ne jamais oublier les contrôles coté serveur.

**lolaalol** · 19/11/2012, 22h11

Ok, merci beaucoup pour ton aide.

jquery animation d'un formulaire

jQuery

Discussions similaires

Partager

Partager