|
Bonjour à tous !
Voilà j'ai dans une de mes pages trois formulaires. Je me suis d'abord occupé du premier. Il me fallait la possibilité de rajouter des lignes, ce que j'ai fait avec javascript. Le script marche, pas de soucis. (bien que je pense qu'il doive être optimisé, mais mes tentatives échouent. (Je débute en javascript)) Lorsque j'arrive au deuxième formulaire, je veux ajouter la même option. Mon premier réflexe est de refaire appel à la même fnction, mais il m'ajoute mes lignes dans le premier formulaire. Alors j'ai refait une fonction en changeant les noms, mais rien n'y fait, ça ne s'ajoute pas. (bon, déjà il ne les ajoute plus dans le premier formulaire). Pourriez vous m'aider ?
Voici mes codes :
Secret (cliquez pour afficher)Code : HTML 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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207 | <!DOCTYPE html>
<html>
<head>
<title>Achat, ventre, location</title>
<link rel="stylesheet" href="css/avl.css">
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("nav a").click(function() {
$.scrollTo($(this).attr("href"), "slow");
return false;
});
});
</script>
<script>
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
document.getElementById('ajouter_ligne').onclick = ajouter_ligne;
ajouter_ligne();
setSeance();
}
// javacsript qui ajoute une ligne
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function ajouter_ligne() {
counter++;
var newFields = document.getElementById('copie').cloneNode(true);
newFields.id = '';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('colle');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>
<meta charset="ANSI"/>
</head>
<body onload ="init();">
<header>
<div id="logo"><img src="img/logo-alv.png" width="300" height="150" alt="logo"/></div>
<nav>
<ul>
<li><a href="#vente">Vente</a></li>
<li><a href="#achat">Achat</a></li>
<li><a href="#location">Location</a></li>
</ul>
<nav>
</header>
<section id="contenu">
<section id="vente">
<h1><img src="img/titre-vente.png" width="300" height="100" alt="titre accueil" class="titres" /></h1>
<form id="vente" method="post" action="achat-vente.php">
<table>
<thead>
<tr>
<th>Réf</th>
<th>Désignation</th>
<th>Prix Unitaire</th>
<th>Quantité</th>
<th>Remise</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr id="readroot"><td>
<input type="text" name="ref_vente" id="ref_vente" value="">
</td><td>
<input type="text" name="designation_vente" id="designation_vente" value="">
</td><td>
<input type="text" name="PU_vente" id="PU_vente" value="">
</td><td>
<input type="text" name="qte_vente" id="qte_vente" value="">
</td><td>
<input type="text" name="remise_vente"id="remise_vente" value="">
</td><td>
<input type="text" name="total_vente" id="total_vente"value="">
</td></tr>
<tr id ="writeroot"></tr>
</tbody>
</table>
<p class="submit">
<button type="button" id="moreFields">Ajouter un produit</button>
<button type="submit" id="valider" class="important">Valider</button>
</p>
</form>
</section>
<section id="achat">
<img src="img/titre-achat.png" width="300" height="100" alt="titre accueil" class="titres" />
<form id="achat" method="post" action="achat-vente.php">
<table>
<thead>
<tr>
<th>Réf</th>
<th>Désignation</th>
<th>Prix Unitaire</th>
<th>Quantité</th>
<th>Remise</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr id="copie"><td>
<input type="text" name="ref_achat" id="ref_achat" value="">
</td><td>
<input type="text" name="designation_achat" id="designation_achat" value="">
</td><td>
<input type="text" name="PU_achat" id="PU_achat" value="">
</td><td>
<input type="text" name="qte_achat" id="qte_achat" value="1">
</td><td>
<input type="text" name="remise_achat"id="remise_achat" value="">
</td><td>
<input type="text" name="total_achat" id="total_achat"value="">
</td></tr>
<tr id ="colle"></tr>
</tbody>
</table>
<p class="submit">
<button type="button" id="ajouter_ligne">Ajouter un produit</button>
<button type="submit" id="valider" class="important">Valider</button>
</p>
</form>
</section>
<section id="location">
<img src="img/titre-location.png" width="300" height="100" alt="titre accueil" class="titres" />
</section>
</section>
<footer>
©MissGames <a href="index.php">Retour à l'accueil</a>
</footer>
</body>
</html>
|
Édité
le 04/02/2012 à 03:24:47
par Nittya
|
|
|
|
|
Salut,
Car t'as les meme ID sur ton deuxième formulaire.
Cordialement, Adonis  .
|
|
Bonjour,
Avant tout, merci pour cette réponse rapide =)
Malheureusement, j'ai changé les id des inputs et le problème subsiste (je vais éditer le code pour montrer à quoi ça ressemble maintenant)
Une autre idée peut être ?
EDIT : Problème résolu, j'ai changé la place de ma deuxième fonction dans le init() et ça a marché. J'édite mon code pour montrer comment c'est à présent. Merci beaucoup pour ton aide =)
Édité
le 04/02/2012 à 03:24:02
par Nittya
|
|
Il faut que les ID du deuxième formulaire soient différent du premier formulaire.
Un ID ne se déclare qu'une seule fois, voilà pourquoi tu as ce problème.
Édité
le 04/02/2012 à 03:38:56
par Adonis
|
|
Merci pour ta réponse, ce problème est résol. En revenche, je me heurte à un autre, et je pense que c'est du à la fonction cloneNode().
En fait, si j'écris dans le premier champs, lorsque je créé une nouvelle ligne, la valeur des inputs est égale à celle du premier champs.
J'ai essayé de faire newFields.value = ''; mais rien n'y fait.
|
|
Tu peux montrer juste le code de ta fonction s'il-te-plaît ? (pour ce problème).
Édité
le 04/02/2012 à 15:31:30
par Adonis
|
|
Bien sur, la voici :
Code : JavaScript 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 | function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
setSeance();
}
// javacsript qui ajoute une ligne
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.value = '';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
|
|
|
Ok,
En fessant: Code : JavaScript
Édité
le 04/02/2012 à 15:38:16
par Adonis
|
|
A quel endroit je met ça, parce que j'ai essayé en remplaçant l'actuel, le code ne marche plus du tout. Je l'ai mit dans ma boucle, ça ne change rien
(en gros, quand je fais ça :
Secret (cliquez pour afficher)Code : JavaScript 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 | function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields[i].value = '';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
|
le code ne marche plus, et quand je fais ça :
Secret (cliquez pour afficher)Code : JavaScript 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 | function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
newField[i].value = '';
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
|
ça ne change rien)
|
|
A l'intérieur du if(theName).
|
|
désolée, ça ne change toujours rien. Je suis en train de me demander si le soucis ne vient pas du cloneNode. Parce que j'ai peur que mon name ne soit pas non plus incrémenté malgré la boucle
EDIT : je sais que je pars un peu dans un autre problème là, mais j'ai fait un 'onClick="alert(this.name);"' sur mes inputs et lorsque je clique dessus il m'affiche toujours le même name. Je vois as trop du coup comment je vais réussir à récupérer les résultats de mon formulaire. Comment ça se fait que ma boucle ne marche pas ?
Édité
le 04/02/2012 à 16:01:22
par Nittya
|
|
A cause de la ligne 22 je pense.
En gros tu souhaites récupérer les éléments (tes divs admettons) et tu souhaites ajouter un ou des éléments.
Là en gros tu prends la div tu fais un childNode, ensuite tu retires l'id, la value, après tu demandes à la div qui n'a plus d'id de faire un ChildNode sur ton new Field.
Un peu compliquer à comprendre :-o, alors tu as pas mal de problèmes.
Pourquoi ne pas faire :
Code : JavaScript | var newFields = document.getElementById('readroot');
|
Pour faire appel à des propriétés ou des méthodes, car des fois tu fais appel à une méthode alors que t'es entrain de faire appel à une propriété.
En gros : document.getElementById('txt').style.color='#FFF'.toUpperCase().
Tu vois tu fais appel à une propriété et après une méthode. (En gros ça peut pas marcher c'est un exemple hein)  !
Cordialement Adonis .
Édité
le 04/02/2012 à 16:16:22
par Adonis
|
|
le soucis c'est u'en enlevant le cloneNode comme tu le suggère, la fonction ne s'exécute plus du tout. C'est vrai que c'est bien compliqué, mais c'est tout ce que j'ai trouvé pour ordonner le résultat, sinon mes nouveaux inputs s'inséraient n'importe où dans la page, et pas à la suite des autres.
J'ai bien essayé en créant les éléments uns par uns mais ça n'a jamais marché.
Je début tout juste en javascript et j'avoue que je ne comprends pas toujours pourquoi ça ne marche pas alors que ça me semble correct ou que ça marche pour d'autres visiblement. Ca va faire
trois jours que je suis sur cette "simple" page, et j'avoue que je commence un peu à désespérer. Je vais finir par le faire en php, même si ça fait un peu lourd. :s
|
Nittya
Adonis
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook
Google+