Générateur de formulaire

**Bensljul** · 07/01/2019, 15h24

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... :

Nom : input.PNG
Affichages : 372
Taille : 1,3 Ko

Nom : input.PNG
Affichages : 372
Taille : 1,3 Ko

voici mon

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
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 CSS :

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
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 :

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
$(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

**Sodium** · 07/01/2019, 15h47

Bonjour,

J'ai lu en diagonale.

Code :

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

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.

**Bensljul** · 10/01/2019, 09h20

Merci

Générateur de formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager