transformer div en formulaire.. et inverse

kangun · 17/03/2011, 11h54

Bonjour à toutes et tous
je vous soumets un petit soucis rencontrer sur des formulaires :
en effet, je souhaite que lorsque je clique sur un div, celui-ci se transforme en formulaire. et ben ca ca marche sans probleme...
par contre, je ne sais comment revenir en arrière (par exemple comment faire comprendre à jquery que j'ai cliqué en dehors) et revenir au div initiale.

voici mon code de base :

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
 
<div><br />
		<li class="menuList">
			<div class="menu">Accueil</div><div class="menuId" id="menuId" style="visibility:hidden;">1</div>
 
		</li>
		<li class="menuList">
			<div class="menu">PortFolio</div><div class="menuId" id="menuId" style="visibility:hidden;">3</div>
		</li>
		<li class="menuList">
			<div class="menu">PortFolio</div><div class="menuId" id="menuId" style="visibility:hidden;">4</div>
		</li>
 
		<li class="menuList">
			<div class="menu">PortFolio2</div><div class="menuId" id="menuId" style="visibility:hidden;">2</div>
		</li>
	<script>
		$("li.menuList").bind("click",
			function(){
			var menu=$(this).children(".menu").text();
			var id=$(this).children(".menuId").text();
			var form="<div style=\margin-left:-30px;'><form method='post'>";
			form+="<input type='text' name='menu' id='menu' value='" + menu + "' />";
			form+="<input type='hidden' name='action' value='update' />";
			form+="<input type='hidden' id='menuId' name='id' value='" + id + "' />";
			form+="</form><span class=\"resume\">Tapes \"ENTR&Eacute;E\" pour valider</span></div>";
			$(this).addClass("menuListForm").removeClass("menuList");
			$(this).html(form);
			$("#menu:visible:enabled:first").focus();
			}/*
			function(){
				var liste="<div class='menu'>" + menu +"</div>";
				liste += "<div class='menuId' id='menuId' style='visibility:hidden;'>" + id + "</div>";
				$(this).html(liste);
			}*/
		);
 
		$("li.menuListForm").mouseout(function(){
			var menu=$("#menu").val();
			var id=$("#menuId").val();
			var liste="<div class='menu'>" + menu +"</div>";
			liste += "<div class='menuId' id='menuId' style='visibility:hidden;'>" + id + "</div>";
			$(this).html(liste);
		});
 
	</script></div>

merci par avance pour votre aide

SpaceFrog · 17/03/2011, 12h00

sans aucun offense, c'est un très mauvais procédé ...

il vaudrait 100 fois mieux avoir les form existants en dur sur la page en display none et en fais un show() ...
déja pour l'intégrité de forms...
et ensuite parce que le "retour arrière se ferait par un simple hide()

kangun · 17/03/2011, 16h23

merci beaucoup pour ton conseil.
il est très bon, mais je souhaite utiliser cette méthode aussi pour de grands articles (plus de 2000 signes) et donc j'aimerais juste que en cliquant sur le div, apparaisse le contenu du div dans un input ou dans un textarea (selon le type de texte), et réapparition du div (et bien sur destruction du form.)
si qqu'un à une réponse par rapport à ce que je veux faire, je suis toujorus preneur.
sinon en effet, sans réponse je vais pour le moment utiliser ta manière...

SpaceFrog · 17/03/2011, 16h27

sinon j'ai deposé une contribution pout la creation dynamique de forms :
http://www.developpez.net/forums/d53...form+dynamique

danielhagnoul · 17/03/2011, 17h42

Bonjour

Quelques conseils :

Un ID doit être unique dans toute la page web.
Ce n'est pas une bonne idée de donner le même nom à une classe et à un ID (menuId).
Le CSS ne doit pas être inclus dans le HTML.
Le formulaire doit être présent dans la page en display none, comme @SpaceFrog vous l'a recommandé.

Exemple :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		.vueForm {display:none; width:400px; height:40px; margin:12px; padding:6px; border:1px solid grey; }
		.vueDiv {display:block;  width:400px; height:40px; margin:12px; padding:6px; border:1px solid grey; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<ul>
	<li>
		<div class="vueDiv">
			<p>Un mot pour remplir</p>
		</div>
		<div class="vueForm">
			<form>
				<input type="text" name="hello" value="Bonjour !" />
				<input type="submit" value="Soumettre" />
			</form>
		</div>
	</li>
	<li>
		<div class="vueDiv">
			<p>Un mot pour remplir</p>
		</div>
		<div class="vueForm">
			<form>
				<input type="text" name="hello" value="Hello !" />
				<input type="submit" value="Soumettre" />
			</form>
		</div>
	</li>
	<li>
		<div class="vueDiv">
			<p>Un mot pour remplir</p>
		</div>
		<div class="vueForm">
			<form>
				<input type="text" name="hello" value="Bonsoir !" />
				<input type="submit" value="Soumettre" />
			</form>
		</div>
	</li>
</ul>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script>
        $(function(){
 
$("div.vueDiv").mouseenter(function(){
	var obj = $(this);
 
	obj.fadeOut(400, function(){
		obj.next().fadeIn(400);
	});
});
 
$("div.vueForm").mouseleave(function(){
	var obj = $(this);
 
	obj.fadeOut(400, function(){
		obj.prev().fadeIn(400);
	});
});
 
$("form").submit(function(){
	var formData = $(this).serialize();
 
	// les données du formulaires pour les éléments ayant un attribut name
	console.log(formData);
 
	// transaction Ajax, voir la FAQ jQuery (http://javascript.developpez.com/faq/jquery/?page=Ajax#AjaxRequest)
 
	return false;
});
 
		});
    </script>
</body>  
</html>

17/03/2011, 12h00	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	sans aucun offense, c'est un très mauvais procédé ... il vaudrait 100 fois mieux avoir les form existants en dur sur la page en display none et en fais un show() ... déja pour l'intégrité de forms... et ensuite parce que le "retour arrière se ferait par un simple hide() __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 16h27	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	sinon j'ai deposé une contribution pout la creation dynamique de forms : http://www.developpez.net/forums/d53...form+dynamique __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 16h23	#3
kangun Invité régulier Inscription : mars 2007 Messages : 20 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : mars 2007 Messages : 20 Points : 6 Points : 6	merci beaucoup pour ton conseil. il est très bon, mais je souhaite utiliser cette méthode aussi pour de grands articles (plus de 2000 signes) et donc j'aimerais juste que en cliquant sur le div, apparaisse le contenu du div dans un input ou dans un textarea (selon le type de texte), et réapparition du div (et bien sur destruction du form.) si qqu'un à une réponse par rapport à ce que je veux faire, je suis toujorus preneur. sinon en effet, sans réponse je vais pour le moment utiliser ta manière...
	00

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