transformer div en formulaire.. et inverse

Version imprimable

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:

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

17/03/2011, 12h00
SpaceFrog

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()
17/03/2011, 16h23
kangun

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...
17/03/2011, 16h27
SpaceFrog

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

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:

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>