[DOM] Formulaire n'apparaît pas

**riete** · 27/10/2008, 11h29

je vous propose une maquette pour refléter la situation qui me cause soucis.

L'appel à la fonction Ajax('f', 'status') devrait inserer dans la ligne du tableau (<tr id=f>) le formulaire avec innerHTML.
Si les balises de formulaire sont commentées tout va bien, si elles sont décommentées le formulaire ne s'affiche plus.

Quelque chose doit m'échapper

. Merci d'avance.

Voici la page qui appel le code Ajax

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id=status>Attente Ajax</div>
 
<table border=1>
	<tr id=f>
 
	</tr>	
	<tr>
		<td><a href=# onclick="Ajax('f', 'status');">Affiche form</a></td>
		<td>Ligne 2</td>
	</tr>
 
</table>

Voici le code appelé

Code :

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

1
2
3
4
5
6
7
8
<!-- <form action="form.php" method="post"> -->
<td class=tdnew>
	<input type=submit value="Ok">
</td>
<td class=tdnew>
	<input type=text name=mot>
</td>
<!-- </form> -->

**E.Bzz** · 27/10/2008, 14h52

Bonjour,

Envoyé par riete

Quelque chose doit m'échapper

.

la modification (ou la création) d'un formulaire à l'aide d'innerHTML n'est pas possible. L'intégration/modification du form dans la structure du document ne se fait pas correctement.

Il faut passer par les instructions DOM ....

A+

**riete** · 27/10/2008, 16h31

Merci, c'est bien ce que je craignais

J'ai commencé à ma faire une batterie de function pour créer ligne, cellule en fonction de la position du click.

Est ce que cela signifie que je suis obligé d'utiliser document.createElement('form') ?
Puis pour créer chacun des éléments du formulaire dois je procéder la même façon (ce qui est très "verbeux").
Ou puis je avoir recourt aux functions du style InsertInputText()...

A+

**SpaceFrog** · 27/10/2008, 16h33

j'ai proposé un petite librairie dans les contributions a cet effet ...

**riete** · 27/10/2008, 17h09

Envoyé par SpaceFrog

j'ai proposé un petite librairie dans les contributions a cet effet ...

Peux tu m'aider à la trouver, j'ai l'impression de chercher une aiguille dans une botte de foin (ou alors je n'ai pas la bonne méthode).
Je continue en parallèle ma formation à cette technique en même temps

Merci

**SpaceFrog** · 27/10/2008, 17h12

http://www.developpez.net/forums/d53...ynamique-form/

**riete** · 28/10/2008, 11h03

Merci pour le lien, mais je dois avouer qu'au stade ou j'en suis dans la compréhension du mécanisme, il vaut mieux que je procède étapes par étapes.
Je décortique le code de l'exemple ce qui m'apprends beaucoup de choses, en particulier l'utilisation du/des HasH que je ne connaissais absolument pas.

Au risque de me faire taper dessus

je vais poser une question:
Pourquoi ne pas utiliser une fonction de ce type dans laquelle tu intègre un switch(HasH) comme tu là fait. Il me semble que celle-ci a l'avantage de fonctionner sur IE et FF.

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
37
38
39
40
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>deleteCell</title>
 
	<script type="text/javascript" language="javascript" charset="iso-8859-1">
 
		function add_obj(obj){
 
			p = document.getElementById(obj);
 
			p.innerHTML ='';
 
			tnode = document.createTextNode('Radio1 ');
			p.appendChild(tnode);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<input type="radio" name="myrad" checked />');
			}catch(err){
				new_Element = document.createElement('input');
			}
 
			new_Element.setAttribute('type','radio');
			new_Element.setAttribute('name','myrad');
			new_Element.id = 'rad1';
			new_Element.setAttribute('checked','checked');
			new_Element.value = '1';
 
			p.appendChild(new_Element);
		}
	</script>
 
</head>
 
<body bgcolor="#CCCCCC">
	<input type="button" value="build" onclick="add_obj('myp');">
	<p id=myp></p>
</body>
</html>

**SpaceFrog** · 28/10/2008, 11h27

justement le problème se pose pour le name que tu ne peux pas attribuer de façon crossbrowser:

Code :

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

new_Element.setAttribute('name','myrad');

d'ou la nécessité de distinguer deux syntaxes d'attribution du name comme expliqué dans l'article

**riete** · 28/10/2008, 12h01

Envoyé par SpaceFrog

justement le problème se pose pour le name que tu ne peux pas attribuer de façon crossbrowser:

Code :

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

new_Element.setAttribute('name','myrad');

d'ou la nécessité de distinguer deux syntaxes d'attribution du name comme expliqué dans l'article

Je ne suis pas certain que nous nous soyons bien compris. Il me semble que le code que j'ai proposé apporte une réponse à cette question.

Question subsidiaire: Pourquoi dans le code qui suit, les elements radio et text sont-ils inséré dans le body et non dans le formulaire comme demandé ?

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
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
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Make form</title>
 
</head>
 
<body bgcolor="#CCCCCC">
	<input type="button" value="add form" onclick="add_form('myp1');">
	<input type="button" id=addradio value="add radio" disabled="true" onclick="add_radio('form1');">
	<input type="button" id=addtext value="add text" disabled="true" onclick="add_text('form1');">
	<p id=myp1></p>
</body>
<script type="text/javascript" language="javascript" charset="iso-8859-1">
		// ----------------------
		// Ajout form
		// ----------------------
		function add_form(obj){
 
			p = document.getElementById(obj);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<form />');
			}catch(err){
				new_Element = document.createElement('form');
			}
 
			new_Element.setAttribute('method','post');
			new_Element.setAttribute('action','');
			new_Element.id = 'form1';
 
			p.appendChild(new_Element);
 
			// Activation de boutons
			document.getElementById("addradio").disabled=false;
			document.getElementById("addtext").disabled=false;
		}
 
		// ----------------------
		// Ajout radio
		// ----------------------
		function add_radio(obj){
 
			f = document.getElementById(obj);
 
			tnode = document.createTextNode('Radio1 ');
			f.appendChild(tnode);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<input type="radio" name="myrad" checked />');
			}catch(err){
				new_Element = document.createElement('input');
			}
 
			new_Element.setAttribute('type','radio');
			new_Element.setAttribute('name','myrad');
			new_Element.id = 'rad1';
			new_Element.setAttribute('checked','checked');
			new_Element.value = '1';
 
			f.appendChild(new_Element);
		}
 
		// ----------------------
		// Ajout Text
		// ----------------------
		function add_text(obj){
 
			f = document.getElementById(obj);
 
			tnode = document.createTextNode('MonTexte ');
			f.appendChild(tnode);
 
			// try pour IE et catch pour FF
			try{
				new_Element = document.createElement('<input type="text" name="mytext" />');
			}catch(err){
				new_Element = document.createElement('input');
			}
 
			new_Element.setAttribute('type','text');
			new_Element.setAttribute('name','mytext');
			new_Element.id = 'text1';
			new_Element.value = 'Rien';
 
			f.appendChild(new_Element);
		}
	</script>
</html>