Discussion :

[moimp]

Bonjour,

J'ai un script destiné à créer des champs de formulaire. Ce script fonctionne bien. Malheureusement les champs créés ne sont pas transmis lors de l'envoi du formulaire. Pourquoi?
Pour ne pas encombrer inutilement, je vous transmets le code js et seulement la partie formulaire du code php. Si vous avez besoin de plus, je vous le transmettrai.

Remarque: Le script qui contient le code html du formulaire est lui-même inclus dans le script editPrint.php qui reçoit le _POST.

Code javascript :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
var linesCount = 0;
 
// Création d'une liste select et de ses options
function makeOptions(optionValues, optionTextes=optionValues) {
	var options = [];
	var text, i;
	var max = optionValues.length;
 
	for (i=0; i<max; i++) {
		if (optionValues[i] == 'optgroup') {
			// inutilisé, non au point
			options[i] = document.createElement('optgroup');
			options[i].label = optionValues[i+1];
			// Lien parent non défini
			options[i].parentNode.insertBefore(options[i], options[i+1]);
		}
		else {
			text = document.createTextNode(optionTextes[i]);
			options[i] = document.createElement('option');
			options[i].value = optionValues[i];
			options[i].appendChild(text);
		}
	}
	return options;
}
 
// Ajout d'une colonne de table
function addField(tagType='selectTag'){
	//Options possibles pour tagType: selectTag, textareaTag, textTag
 
	// On incrémente le compteur ci-dessus
	linesCount++;
	// On récupère le tableau
	var container   = document.getElementById('list');
	// On crée les variables nécessaires à la constitution de la ligne 
	var line		= document.createElement('tr');
	var cells		= [];
	var elements	= ['field', 'bold', 'italic', 'family', 'size', 'color', 'del'];
	var tag;
	switch (tagType) {
		case 'selectTag':	tag = 'select';		break;
		case 'textTag':		tag = 'text';		break;
		case 'textareaTag':	tag = 'textarea';	break;
	}
	var types		= [tag, 'checkbox', 'checkbox', 'select', 'number', 'select', 'checkbox'];
	var max			= elements.length;
	var fields		= [];
	var i			= 0;
	var k, xMax, arrOptions;
 
	// Création et insertion de la ligne
	container.appendChild(line);
 
	// Création des balises interne à la ligne
	for (i=0; i<max; i++) {
		k=i+1;
		switch (types[i]) {
			case 'checkbox':
				fields[i] = document.createElement('input');
				fields[i].id	= '['+k+']'+elements[i];
				fields[i].setAttribute('name', fields[i].id);
				fields[i].setAttribute('type', 'checkbox');
				break;
			case 'number':
				fields[i] = document.createElement('input');
				fields[i].id	= '['+k+']'+elements[i];
				fields[i].setAttribute('name', fields[i].id);
				fields[i].setAttribute('type', 'number');
				// Données particulières à ce champ
				fields[i].min 	= 8;
				fields[i].max	= 36;
				fields[i].value	=12;
				break;
			case 'text':
				fields[i] = document.createElement('input');
				fields[i].id	= '['+k+']'+elements[i];
				fields[i].setAttribute('name', fields[i].id);
				fields[i].setAttribute('type', 'text');
				break;
			default:
				fields[i] = document.createElement(types[i]);
				fields[i].id	= '['+k+']'+elements[i];
				fields[i].name	= fields[i].id;
				break;
		}
	}
 
	// Contenu des listes
	// Liste tables (la variable tables est créée dans le script php
	//var optionValues = ['toto', 'tata']; // Pour essais
	arrOptions = makeOptions(optionValues, optionTextes);
	xMax = optionValues.length;
	fields[0].appendChild(arrOptions[xMax-1]);
	for (i=xMax-1; i>=0; i--) {
		fields[0].insertBefore(arrOptions[i], arrOptions[i+1]);
	}
	fields[0].selectedIndex = 0;
 
	// Liste family
	var families = ['Courier', 'Arial', 'Comic', 'Helvetica', 'Times'];
	arrOptions = makeOptions(families);
	xMax = families.length;
	fields[3].appendChild(arrOptions[xMax-1]);
	for (i=xMax-1; i>=0; i--) {
		fields[3].insertBefore(arrOptions[i], arrOptions[i+1]);
	}
	fields[3].selectedIndex = 1;
 
	// Champ color
	var colors = ['red','blue','green','yellow','black','white','salmon','silver','gray','navy'];
	arrOptions = makeOptions(colors);
	xMax = colors.length;
	fields[5].appendChild(arrOptions[xMax-1]);
	for (i=xMax-1; i>=0; i--) {
		fields[5].insertBefore(arrOptions[i], arrOptions[i+1]);
	}
	fields[5].selectedIndex = 4;
 
	// Suppression de la ligne sur click de 'del'
	fields[6].onclick = function() {
		container.removeChild(line);
	}
 
	for (i=max-1; i>=0; i--) {
		cells[i] = document.createElement('td');
		if (i == max-1) {
			cells[i].appendChild(fields[i]);
			line.appendChild(cells[i]);
		}
		else {
			cells[i].appendChild(fields[i]);
			line.insertBefore(cells[i], cells[i+1]);
		}
	}
	container.appendChild(line);
 
}
 
// Ajout d'un saut de ligne
function addLine() {
	// On incrémente le compteur du début
	linesCount++;
 
	var container   = document.getElementById('list');
	var line		= document.createElement('tr');
	var cells		= [];
 
	cells[1] = document.createElement('td');
	cells[1].appendChild(document.createElement('hr'));
	cells[1].setAttribute('colspan', 7);
	line.appendChild(cells[1]);
 
	cells[2] = document.createElement('input');
	cells[2].id = '['+'1'+']'+'CRLN';
	cells[2].setAttribute('name', cells[2].id);
	cells[2].setAttribute('type', 'hidden');
	cells[2].value = 'CRLN';
	line.appendChild(cells[2]);
 
	container.appendChild(line);
}

Code php :

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
<form method="post" action="editPrint.php">
	<p>
		<input type='button' value='<?= PRINT_BTN_ADD_FLD; ?>' onclick='addField()' />
		<input type="button" value='<?= PRINT_BTN_ADD_TXT; ?>' onclick="addField('textTag')" />
		<input type='button' value='<?= PRINT_BTN_ADD_LINE;?>' onclick='addLine()' />
	</p>
	<table id="list">
		<tr class="center">
			<th>Champ</th>
			<th><strong>B</strong></th>
			<th><i>I</i></th>
			<th>Font</th>
			<th>Size</th>
			<th>Color</th>
			<th><img src="/_images/del.png" alt="del.png" />
		</tr>
	</table>
	<p><input type="submit" name="valid" value="<?= BTN_GO_ON; ?>" /></p>
</form>

[badaze]

La façon dont tu crées les id (et donc les name) ne va pas. Un id ne commence pas par un [.
De plus les lignes du tableau ont toutes le même id => cells[2].id = '['+'1'+']'+'CRLN';
A quoi sert ce CRLN ?

J'ai l'impression que globalement ce ne sont pas les seules erreurs.

Ci-dessous j'ai modifié ton code et si je clique 3 fois sur le bouton Ajout ligne les variables sont bien envoyées par POST (voir 2ème image).
Je ne comprends pas bien ce que tu veux faire car tu lies (verbe lier) les input hidden aux tr.





Pour les autres fonctions, les erreurs doivent être du même ordre. Je ne comprends pas : fields[i].id = '['+k+']'+elements[i]; <= pourquoi mettre elements[i] ?

Dans addField tu crées un tr mais pas les td et les éléments que tu crées ne sont pas affectés à un parent.

[moimp]

Merci. Oui effectivement. Le nom des champs n'allait pas du tout. Dans les indices, j'avais fait une confusion entre le nom des champs et celui des lignes. Je les ai renommés et tout va bien. J'en ai aussi profité pour améliorer le code.