Positionnement d'un élément ajouté dynamiquement

**katoyi** · 21/08/2010, 18h39

Bonjour,
J'ai un soucis sur mon code et j'aimerais avoir de votre aide.
Voila la situation.
J'ai un formulaire qui se trouve dans une table, et sur la page, il y a possibilité d'ajouter des textarea. Mon problème est que si j'ajoute mon textarea avec la méthode appendChild de la cellule dans laquelle je veux voir appairaitre le formulaire, lors de la validation, j'ai pas le textarea ajouter n'est pas pris en compte. Par contre si j'ajoute par la méthode appendChild du formulaire, c'est bien prix en compte sauf que le textarea ne se retrouve plus dans la cellule que je veux, mais au contraire me déforme ma page web. Voici le code JS.

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
 
function addLot(item){
    var i=18 + parseInt(item);
    var newRow = document.getElementById('aoAdd').insertRow(i);
    var newCell1 = newRow.insertCell(0);
    newCell1.className='tab_g';
    var newCell2=newRow.insertCell(1);
    newCell2.className='form_style';
    newCell2.align='left';
    newCell2.innerHTML='Lot' + item + ':';
    var newCell3=newRow.insertCell(2);
    newCell3.align='left';
    newCell3.width='50%';
    var controlName='ab_lot'+item;
    var theForm = document.getElementById("ao_add_form");
    var textArea = document.createElement("textarea");
    textArea.name = controlName; 
    textArea.cols = "25";
    textArea.setAttribute('cols', '25');
    textArea.setAttribute('rows', '2');
    textArea.setAttribute('class', 'form_input_no_hover');
    newCell3.appendChild(textArea);
    textArea.form=theForm;
 
    var newCell4=newRow.insertCell(3);
    newCell4.className='tab_d'; 
}

J'ai essayé de forcer l'attribu form de mon textarea mais rien. Quelqu'un saurait il m'aider.
Merci d'avance.

**blade159** · 21/08/2010, 18h59

Bonjour,

pourrait-on avoir le code de la page HTML?

Merci d'avance.

**katoyi** · 21/08/2010, 19h56

Envoyé par blade159

Bonjour,

pourrait-on avoir le code de la page HTML?

Merci d'avance.

Oui bien sûr, le voici.

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
 
<tr>
        <td class="tab_g">
        </td>
        <td align="left" class="form_style" nowrap="nowrap">
            <span class="accroche">Les lots de l'appel d'offre.</span>
 
            <hr />
        </td>
        <td align="left" width="50%" nowrap="nowrap">            
 
<input type="hidden" id="ab_nbLot" name="ab_nbLot" value="1" />
<a href="http://localhost/site/index.php/#" onclick="return false;"><img border="0"  src="http://localhost/site/images/1_add.png"  onclick="addLot(document.getElementById('ab_nbLot').value);
                            document.getElementById('ab_nbLot').value = parseInt(document.getElementById('ab_nbLot').value) + 1;
                            return false;" /></a>        </td>
        <td class="tab_d"></td>
    </tr>

**blade159** · 21/08/2010, 20h31

voici le code complet que j'ai testé (Firefox 3.6.8), ça à l'air de fonctionner pourtant :

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
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
162
163
164
165
166
167
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script language="javascript">
function addLot(item){
    var i=18 + parseInt(item);
    var newRow = document.getElementById('aoAdd').insertRow(i);
    var newCell1 = newRow.insertCell(0);
    newCell1.className='tab_g';
    var newCell2=newRow.insertCell(1);
    newCell2.className='form_style';
    newCell2.align='left';
    newCell2.innerHTML='Lot' + item + ':';
    var newCell3=newRow.insertCell(2);
    newCell3.align='left';
    newCell3.width='50%';
    var controlName='ab_lot'+item;
    var theForm = document.getElementById("ao_add_form");
    var textArea = document.createElement("textarea");
    textArea.name = controlName; 
    textArea.cols = "25";
    textArea.setAttribute('cols', '25');
    textArea.setAttribute('rows', '2');
    textArea.setAttribute('class', 'form_input_no_hover');
    newCell3.appendChild(textArea);
    //textArea.form=theForm;
 
    var newCell4=newRow.insertCell(3);
    newCell4.className='tab_d'; 
}
 
 
</script>
 
</head>
 
<body>
<table id="aoAdd">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="tab_g"></td>
        <td align="left" class="form_style" nowrap="nowrap">
            <span class="accroche">Les lots de l'appel d'offre.</span>
 
            <hr />
        </td>
        <td align="left" width="50%" nowrap="nowrap">            
            <input type="hidden" id="ab_nbLot" name="ab_nbLot" value="1" />
            <a href="http://127.0.0.1/test/index3.html/#" onclick="return false;"><img border="0"  src="http://www.customxp.net/PngFactory/png/_thumb/16869-marezio-ThumbsPlus.png"  onclick="addLot(document.getElementById('ab_nbLot').value); document.getElementById('ab_nbLot').value = parseInt(document.getElementById('ab_nbLot').value) + 1; return false;" />toto</a>
         </td>
        <td class="tab_d"></td>
    </tr>
 
</table>
 
</body>
</html>

**katoyi** · 21/08/2010, 20h46

L'affichage ne pose pas de problème, mais par contre, le problème se trouve lors de la validation du formulaire. Les textarea ajouté dynamiquement ne sont pas récupérer.
Et c'est là mon problème.

**blade159** · 21/08/2010, 21h00

Je pense que le mieux serait de modifier le 'controlName' de 'NewCell3' :

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
 
function addLot(item){
    var i=18 + parseInt(item);
    var newRow = document.getElementById('aoAdd').insertRow(i);
    var newCell1 = newRow.insertCell(0);
    newCell1.className='tab_g';
    var newCell2=newRow.insertCell(1);
    newCell2.className='form_style';
    newCell2.align='left';
    newCell2.innerHTML='Lot' + item + ':';
    var newCell3=newRow.insertCell(2);
    newCell3.align='left';
    newCell3.width='50%';
    var controlName='ab_lot[]';
    var theForm = document.getElementById("ao_add_form");
    var textArea = document.createElement("textarea");
    textArea.name = controlName; 
    textArea.cols = "25";
    textArea.setAttribute('cols', '25');
    textArea.setAttribute('rows', '2');
    textArea.setAttribute('class', 'form_input_no_hover');
    newCell3.appendChild(textArea);
    //textArea.form=theForm;
 
    var newCell4=newRow.insertCell(3);
    newCell4.className='tab_d'; 
}

Comme cela, vous pourrez récupérer les valeurs des textareas sous forme d'un tableau (ab_lot[]).

**Bovino** · 21/08/2010, 21h17

Attention aussi à l'ajout dynamique du name pour IE : http://www.developpez.net/forums/d53...ynamique-form/

**katoyi** · 21/08/2010, 21h43

Envoyé par blade159

Je pense que le mieux serait de modifier le 'controlName' de 'NewCell3' :

Comme cela, vous pourrez récupérer les valeurs des textareas sous forme d'un tableau (ab_lot[]).

Même en définissant ainsi, lors de la validation du form, je ne retrouve pas dans $_POST[''], la variable ab_lot.
La question que je me pose c'est: Y a t il un moyen de définir la position d'un élément du formulaire dans une cellule? comme celà, mon code deviendrait

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
function addLot(item){
    var i=18 + parseInt(item);
    var newRow = document.getElementById('aoAdd').insertRow(i);
    var newCell1 = newRow.insertCell(0);
    newCell1.className='tab_g';
    var newCell2=newRow.insertCell(1);
    newCell2.className='form_style';
    newCell2.align='left';
    newCell2.innerHTML='Lot' + item + ':';
    var newCell3=newRow.insertCell(2);
    newCell3.align='left';
    newCell3.width='50%';
    var controlName='ab_lot'+item;
    var theForm = document.getElementById("ao_add_form");
    var textArea = document.createElement("textarea");
    textArea.name = controlName; 
    textArea.setAttribute('cols', '25');
    textArea.setAttribute('rows', '2');
    textArea.setAttribute('class', 'form_input_no_hover');
    theForm.appendChild(textArea);
    
   //Et ici le code qui va permettre de positionner le textarea dans newCell3. Y en a t il un code qui permette de le faire?

    var newCell4=newRow.insertCell(3);
    newCell4.className='tab_d'; 
}

**blade159** · 21/08/2010, 22h31

Pourrait-on avoir le code complet de la page parce que c'est une solution que j'utilise sur plusieurs sites que j'ai créés (lors d'upload de fichiers avec commentaires)?

**Bovino** · 21/08/2010, 23h03

Attention aussi qu'un tableau ne doit pas à priori contenir de balise form (sauf éventuellement dans un td. Il faut donc mettre le tableau dans le formulaire.

**blade159** · 21/08/2010, 23h06

En effet, j'ai oublié de préciser que je poste un tableau lors de mes uploads...

**katoyi** · 22/08/2010, 00h10

Envoyé par Bovino

Attention aussi qu'un tableau ne doit pas à priori contenir de balise form (sauf éventuellement dans un td. Il faut donc mettre le tableau dans le formulaire.

Ah wiiiiiiiiiiiiiiiiiiiiiiiiiiiiii,
C'était ca mon erreur. J'ai mis ma balise

Code :

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

<form action="http://localhost/site/index.php/appel_offre/ajout" method="post" autocomplete="off" id="ao_add_form">

dans une balise <td>.
Je viens donc de la mettre hors de ma table et tout marche nickel.

Merci infiniment à vous tous.

Positionnement d'un élément ajouté dynamiquement

JavaScript

Discussions similaires

Partager

Partager