[Javascript] Ajouter/supprimer option d'un formulaire

Version imprimable

22/06/2007, 11h19
bressan

[Javascript] Ajouter/supprimer option d'un formulaire

Bonjour,

Je dois reprendre un formulaire avec plusieurs critères.
Pour certains blocs de critère (liste multiple, boîte à cocher, bouton radio ...), l'utilisateur a la possibilité en cliquant sur un lien d'ajouter un bloc identique autant de fois qu'il le veut, et de pouvoir les enlever avec un lien en face de chacun des bloc ajouté. Donc un + est affiché en face du premier bloc et un - en face des autres.
Le problème c'est que j'ai essayé de le faire sans retoucher tout le code mais rien ne marche correctement.
Donc si quelqu'un a une idée à me proposer, une manière de faire ou quelque chose ce serait sympa.
Merci d'avance.

Je voulais en faire le moins possible mais faut pas rêver.
Si je veux réécrire tout mon bloc, est ce qu'une syntaxe comme ça marcherai ?
Je demande car c'est un bloc très gros à faire et si la syntaxe ne marche pas c'est pas la peine que je paluche tout à taper.

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
 
		var divParent = document.getElementById('nbdiv_mot_cle');
 
		var nouveauDiv = document.createElement('div');
		nouveauDiv.id = 'div_filtre_mot_cle'+nbdiv_mot_cle; // dans un hidden de nbdiv_mot_cle
		nouveauDiv.style = 'border-width:1;color:red;';
 
		var nouveauTable = document.createElement('table');
		nouveauTable.class = 'cpcwidth';
 
		var nouveauTr1 = document.createElement('tr');
		nouveauTr1.valign = 'center';
 
		var nouveauTd11 = document.createElement('td');
		nouveauTd11.class = 'ligneinput';
		nouveauTd11.valign = 'center';
		nouveauTd11.width = '220';
		nouveauTd11.cospan = '2';
 
		var nouveauLabel1 = document.createElement('label');
		nouveauLabel1.appendChild(document.createTextNode("Mot clé recherché : "));
 
		var nouveauInputText1 = document.createElement('input');
		nouveauInput.name = 'mot_rech_0';
		nouveauInput.type = 'text';
		nouveauInput.size = '27';
 
		var nouveauInputBox1 = document.createElement('box');
		nouveauInput.name = 'tous_sauf_0';
		nouveauInput.type = 'checkbox';
		nouveauInput.value = '1';		
 
		var nouveauLabel2 = document.createElement('label');
		nouveauLabel2.appendChild(document.createTextNode(" tous sauf"));
 
		...
 
		divParent.appendChild(nouveauDiv);
		nouveauDiv.appendChild(nouveauTable);
		nouveauDiv.appendChild(nouveauTr1);
		nouveauDiv.appendChild(nouveauTd11);
		nouveauDiv.appendChild(nouveauLabel11);
		nouveauDiv.appendChild(nouveauInputText1);
		nouveauDiv.appendChild(nouveauInputBox1);
		nouveauDiv.appendChild(nouveauInputLabel2);
 
		...

Merci d'une petite réponse.:lol:

Cette syntaxe marche, les attributs nowrap et colspan ne marche pas, à voir d'où vient le problème mais pour le reste c'est bon, je donne le code si ça intéresse quelqu'un (désolé pour l'indentation c'était pour me repérer) :

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
100
101
102
103
104
105
106
 
function add_f_mot_cle(id)
	{
 
		var nbdiv_mot_cle = document.enreg.nbdiv_mot_cle.value;
 
		var divParent = document.getElementById('div_mot_cle0');
 
		var nouveauDiv = document.createElement('div');
		nouveauDiv.id = 'div_filtre_mot_cle'+nbdiv_mot_cle;
		//nouveauDiv.style = 'border-width:1;color:red;';
 
		var nouveauTable = document.createElement('table');
		nouveauTable.className = 'cpcwidth';
 
			var nouveauTr1 = document.createElement('tr');
			nouveauTr1.valign = 'center';
 
				var nouveauTd11 = document.createElement('td');
				nouveauTd11.className = 'ligneinput';
				nouveauTd11.valign = 'left';
				nouveauTd11.width = '220';
				nouveauTd11.nowrap = 'nowrap';
				nouveauTd11.colspan = '2';
 
					var nouveauLabel11 = document.createTextNode("Mot clé recherché : ");
 
					var nouveauInputText1 = document.createElement('input');
					nouveauInputText1.name = 'mot_rech_'+nbdiv_mot_cle;
					nouveauInputText1.type = 'text';
					nouveauInputText1.size = '27';
 
					var nouveauInputBox1 = document.createElement('input');
					nouveauInputBox1.name = 'tous_sauf_0';
					nouveauInputBox1.type = 'checkbox';
					nouveauInputBox1.value = '1';		
 
					var nouveauLabel12 = document.createTextNode(" tous sauf");
 
			var nouveauTr2 = document.createElement('tr');
			nouveauTr2.valign = 'center';
 
				var nouveauTd21 = document.createElement('td');
				nouveauTd21.className = 'ligneinput';
 
					var nouveauInputSelect1 = document.createElement('input');
					nouveauInputSelect1.name = 'type_rech_'+nbdiv_mot_cle+'[]';
					nouveauInputSelect1.type = 'select';
					nouveauInputSelect1.size = '15';
					nouveauInputSelect1.multiple = 'true';
					//nouveauInputSelect1.style = 'width:350;';
 
					// Création de la liste à partir du tableau php.
 
					var nouveauLabel21 = document.createTextNode(' (-)');
 
					var nouveauLien1 = document.createElement('a');
					nouveauLien1.href = 'javascript:delLigne('+nbdiv_mot_cle+');';
					//nouveauLien1.onclick = delLigne (nbdiv_mot_cle);
					nouveauLien1.id = 'moins_'+nbdiv_mot_cle;
					//nouveauLien1.onclick = 'delLigne('+nbdiv_mot_cle+'); return false;';
					nouveauLien1.className = 'navigation';	
 
				var nouveauTd22 = document.createElement('td');
				nouveauTd22.className = 'txt';
				nouveauTd22.align = 'left';
				nouveauTd22.nowrap = 'nowrap';
 
					var nouveauLabel22 = document.createTextNode(" Et ");
 
					var nouveauInputRadio1 = document.createElement('input');
					nouveauInputRadio1.name = 'concatenation_mot_cle_0';
					nouveauInputRadio1.type = 'radio';
					nouveauInputRadio1.checked = 'checked';
					nouveauInputRadio1.value = 'AND';
 
					var nouveauLabel23 = document.createTextNode(" Ou ");
 
					var nouveauInputRadio2 = document.createElement('input');
					nouveauInputRadio2.name = 'concatenation_mot_cle_0';
					nouveauInputRadio2.type = 'radio';
					nouveauInputRadio2.value = 'OR';		
 
		nb_div_mot_cle = nb_div_mot_cle + 1;
		document.enreg.nbdiv_mot_cle.value = nb_div_mot_cle;
 
		divParent.appendChild(nouveauDiv);
		nouveauDiv.appendChild(nouveauTable);
			nouveauTable.appendChild(nouveauTr1);
				nouveauTr1.appendChild(nouveauTd11);
					nouveauTd11.appendChild(nouveauLabel11);
					nouveauTd11.appendChild(nouveauInputText1);
					nouveauTd11.appendChild(nouveauInputBox1);
					nouveauTd11.appendChild(nouveauLabel12);
			nouveauTable.appendChild(nouveauTr2);
				nouveauTr2.appendChild(nouveauTd21);
					nouveauTd11.appendChild(nouveauInputSelect1);
					nouveauTd11.appendChild(nouveauLien1);
						nouveauLien1.appendChild(nouveauLabel21);
				nouveauTr2.appendChild(nouveauTd22);
					nouveauTd11.appendChild(nouveauLabel22);
					nouveauTd11.appendChild(nouveauInputRadio1);
					nouveauTd11.appendChild(nouveauLabel23);
					nouveauTd11.appendChild(nouveauInputRadio2);
 
	}