Générateur de formulaire

1 pièce(s) jointe(s)

Bonjour,

je suis en train de faire un TP pour créer un générateur de formulaire. J'ai pas mal avancé mais j'ai un souci, quand je créer d'autres lignes, elles se créent en double... :

Pièce jointe 439397

voici mon

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
<html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Cours</title>
	<link href="test.css" rel="stylesheet" type="text/css" />
	<script src="jquery-3.3.1.min.js"></script>
	<script src="jquery-ui.js"></script>
	<script src="test.js"></script>
</head>
<body>
	<div id="form">
 
	</div>
	<div id="crea_form">
		<p>Utilisez ces boutons pour créer votre formulaire</p>
		<span id="btn_crea">
			<button id="btn_label">Label</button>
			<button id="btn_txt">Zone de texte</button>
			<button id="btn_btn">Bouton</button>
		</span>
		<span id="label">
				<label>Label : </label>
				<input type="text">
				<button>OK</button>
		</span>
		<span id="txt">
				<label>Zone de texte : </label>
				<input type="text">
				<button>OK</button>
		</span>
		<span id="btn">
				<label>Bouton : </label>
				<input type="text">
				<button>OK</button>
		</span>
	</div>
 
</body>
</html>

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
body{
	display: flex;
	flex-direction: row;
 
}
 
#form{
	display: flex;
	flex-direction: column;
	background-color: #F3F781;
	/*border: 1px solid black;*/
	width: 70%;
}
 
p{
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 4px;
}
 
#btn_crea{
	margin-bottom: 4px;
	/*border-bottom: 2px solid black;*/
}
 
 
#crea_form{
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: #58D3F7;
	width: 30%;
	/*border: 1px solid black;*/
}
 
#label,#txt,#btn{
	display: none;
}

et le jquery :

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
$(document).ready(function(){
	var $label = $('#btn_crea #btn_label'),
			$txt = $('#btn_crea #btn_txt'),
			$btn = $('#btn_crea #btn_btn'),
			$val_label = $('#label input'),
			$val_txt = $('#txt input'),
			$val_btn = $('#btn input'),
			val_label = '',
			val_txt = '',
			val_btn = '',
			sel_val = '';
 
 
 
	$label.click(function(){
		$('#label').show();
		$val_label.val('');
		$('#label button').click(function(){
			val_label = $val_label.val();
			sel_val = '"'+val_label+'"'
			//alert(val_label);
			$('#form').append('<div id="'+val_label+'"><span>'+val_label+'</span></div>');
			$('#label').hide();
		});
	});
 
	$txt.click(function(){
		$('#txt').show();
		$val_txt.val('');
		$('#txt button').click(function(){
			val_txt = $val_txt.val();
			//alert(val_txt);
			$('#form [id="'+val_label+'"]').append('<input id="'+val_txt+'" type="texte" >');
			$('#txt').hide();
		});
	});

Je vous remercie par avance pour votre aide

Bonjour,

J'ai lu en diagonale.
Code:

1 2 3 4 5 6 7 8 9 10 11 $label.click(function(){ $('#label').show(); $val_label.val(''); $('#label button').click(function(){ val_label = $val_label.val(); sel_val = '"'+val_label+'"' //alert(val_label); $('#form').append('<div id="'+val_label+'"><span>'+val_label+'</span></div>'); $('#label').hide(); }); });
Je pense que de cette manière, à chaque clic sur $label tu attaches un nouvel événement click sur ton bouton et le code s'exécute donc plusieurs fois.

Merci :)