Discussion :

[moimp]

Bonjour,

Je crée un formulaire de composition de badges ou étiquettes (d'après http://javascript.developpez.com/tel...que-des-champs).
Ce formulaire est constitué d'un tableau dont chaque ligne contient les mêmes champs. La ligne est repérée par son numéro.
Je rencontre une difficulté pour créer les champs du formulaire boucle for. Pour la ligne 21, la console me renvoie "createElement is not defined.". Même erreur pour la ligne suivante en commentaire.
Voici le début de mon script:

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
var linesCount = 0;
// Ajout d'une colonne de table
function addField(){
	// On incrémente le compteur ci-dessus
	linesCount++;
	// On récupère le tableau
	var container   = document.getElementById('list');
	/**
		* Création des éléments dont on a besoin :
		* Un ligne dans lequel on mettra le champ à ajouter, les champs de formats
		* et une case à cocher qui nous servira à enlever ensuite la ligne.
		*
		* En utilisant une ligne ce sera plus facile car sinon
		* on aurait du enlever les champs et les cases à cocher séparément.
	*/
	var line		= document.createElement('td');
	var elements	= ['content', 'family', 'size', 'bold', 'italic', 'color', 'del'];
	var max			= elements.length;
	var inputs		= [];
	for (var i=1; i<=max; i++) {
		inputs.push = createElement('input');
		//inputs[i] = createElement('input');
		inputs[i].name = '['+i+']'+elements[i];
	}
	inputs[1].type = 'select';
	inputs[2].type = 'number';
	inputs[3].type = 'select';
	inputs[4].type = 'checkbox';
	inputs[5].type = 'checkbox';
	inputs[6].type = 'select';
	inputs[7].type = 'checkbox';
}

Contenu du tableau elements:
content contient le nom de la table MySql et la colonne d'où proviennent les données à imprimer
del est une case à cocher qui efface la ligne lorsqu'elle est cliquée
Les autres éléments définissent le format d'impression.

[melka one]

jour

c'est normale tu oubli de mettre document

Code :

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

inputs.push = document.createElement('input');

createElement est une méthode de l'objet document

[moimp]

Merci pour cette info. C'est déjà un point de réglé mais je galère pour la suite.

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
function addField(){
	// On incrémente le compteur ci-dessus
	linesCount++;
	// On récupère le tableau
	var container   = document.getElementById('list');
	/**
		* Création des éléments dont on a besoin :
		* Un ligne dans lequel on mettra le champ à ajouter, les champs de formats
		* et une case à cocher qui nous servira à enlever ensuite la ligne.
		*
		* En utilisant une ligne ce sera plus facile car sinon
		* on aurait du enlever les champs et les cases à cocher séparément.
	*/
	var line		= document.createElement('td');
	var elements	= ['content', 'family', 'size', 'bold', 'italic', 'color', 'del'];
	var types		= ['select', 'select', 'number', 'checkbox', 'checkbox', 'select', 'checkbox'];
	var max			= elements.length;
	var fields		= [];
	for (var i=1; i<=max; i++) {
		//fields[i] = document.createElement('input');
		console.log(i, types[i-1]);
		fields[i] = document.createElement(types[i-1]);
		fields[i].name = '['+i+']'+elements[i-1];
		alert(fields[i].type);
	}

La console me renvoie les bonnes valeurs de types mais alert() me renvoie 'undefined' pour les autres types. Pourquoi?

J'en profite pour savoir si il existe un tuto ou des références pour manipuler les listes select (je ne trouve rien de bien satisfaisant pour l'instant). Je cherche en particulier comment créer une liste select complète avec ses options. Les tutos trouvés ne parlent pas de la création ex-nihilo.

[NoSmoking]

@melka one :

inputs.push = document.createElement('input');

ne serait ce pas plutôt

Code :

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

inputs.push( document.createElement('input'));

@smccbbm :

var types= ['select', 'select', 'number', 'checkbox', 'checkbox', 'select', 'checkbox'];

Attention select n'est pas un <input> mais un élément à part entière.

mais alert() me renvoie 'undefined' pour les autres types. Pourquoi?

où initialises tu tes éléments ?

for (var i=1; i<=max; i++) {

pourquoi ne pas faire un classique for (var i=0; i<max; i++), cela t'éviteras de gérer des indices i-1.

[melka one]

j'avais pas met lunettes

[SpaceFrog]

Que de souvenirs émouvants ... https://www.developpez.net/forums/d5...ynamique-form/

[NoSmoking]

Merci pour ce rappel, j'avais la flemme de chercher

[moimp]

Que de souvenirs émouvants ... https://www.developpez.net/forums/d5...ynamique-form/

J'ai parcouru ton code mais mes connaissances en JS sont trop faibles pour me permettre de tout comprendre. Parmi toutes les corrections, quelle est la version complète à utiliser? Est-ce que ce code n'est pas devenu obsolète?
Je me pose des questions pour écrire les options de listes select.
Je vais creuser un peu l'utilisation du DOM avant de continuer cette discussion.
Par rapport à ton script, le mien est plus simple puisque mes champs sont figés et tous inclus dans une ligne de tableau dont chaque ligne est identique mais dont le nombre varie.

[SpaceFrog]

Ce code à été écrit avant Jquery ...

Aujourd'hui j'utilise Jquery pour créer des formulaires, mais cela n'enlève rien au code donné, il est toujours d'actualité.

[moimp]

Merci. Pour l'instant, je continue avec ma méthode car j'ai besoin d'apprendre. Choisir la facilité ou en faire trop à la fois ne sont peut-être pas la bonne solution pour ça.
Mais j'ai encore une petite question: Pourquoi ces deux écritures ne sont pas équivalentes? Je préférerais la première si elle fonctionnait.

Code :

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

1
2
//fields[i].type = 'checkbox';
fields[i].setAttribute('type', 'checkbox');