Formulaire, javascript et compatibilité navigateurs

**Welden** · 10/12/2012, 11h22

Bonjour à tous,

J'ai un petit problème qui me fait m'arracher les cheveux et où je ne trouve pas de solution.

J'ai un logiciel d'un client qui tourne depuis quelques années, mais depuis que mon client a mis à jour son ie (9 puis 10), un formulaire a un problème. Ce formulaire sert à faire des factures, pour une facture, l'utilisateur à la possibilité de saisir plusieurs paiements. Pour cela un petit bouton javascript permet de rajouter une ligne de paiement en dessous de celle par défaut.

Sous ie8, la ligne se rajoute et lors de l'envoi du formulaire tous les paiements sont bien insérer dans la bdd.

Sous ie9, ie10, chrome (et probablement firefox et les autres), la ligne se rajoute bien au clique sur le bouton, en lisant les sources je vois bien mes nouveaux champs dans la page, les noms de ces champs sont bons, je peux donc remplir correctement mon formulaire. Seulement à l'envoi du formulaire, je n'ai plus que la première ligne de paiement qui est prise en compte dans mon script de traitement. Quelques soit le nombre de ligne rajouté, au submit il ne me traite que ma ligne en "dur" par défaut.

Voici un petit extrait du code :

Fonction d'ajout de ligne dynamique :

Code :

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

1
2
3
4
5
6
7
function create_acompte_s3(i)
{
	var i2 = i + 1;
 
	document.getElementById('leschamps_'+i).innerHTML = '<table><tr><td class="bold fz12">Mode de paiement '+i2+'</td></tr><tr><td><table><tr><td><table cellpadding="0" cellspacing="0"><tr><td><input name="date_acompte_'+i2+'" style="text" size="14" /></td><td width="10px">&nbsp;</td><td class="mid"><img src="../images/cal.png" onclick="ds_sh(form_fact.date_acompte_'+i2+');" title="Cliquez ici pour afficher le calendrier" ></td></tr></table></td><td><input type="text" name="montant_acompte_'+i2+'" size="5" /></td><td><input type="radio" name="mode_'+i2+'" value="Espece" />Esp<input type="radio" name="mode_'+i2+'" value="CB" />CB<input type="radio" name="mode_'+i2+'" value="Flash3" />Flash3<input type="radio" name="mode_'+i2+'" value="Pluriel" />Pluriel</td><td class="bold">&nbsp;&nbsp;Infos : <input type="text" name="info_acompte_'+i2+'" class="right" /></td></tr></table></td></tr></table>';
	document.getElementById('leschamps_'+i).innerHTML += (i <= 20) ? '<table cellpadding="0" cellspacing="0" class="right" width="528px"><tr><td class="bold right"><span id="leschamps_'+i2+'"><input type="button" onclick="javascript:create_acompte_s3('+i2+')" value="Ajouter une ligne" class="validation_tab" /></span></td></tr></table>' : '';
}

Formulaire :

Code html :

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
<table>
	<tr>
		<td class="bold fz12">Mode de paiement 1</td>
	</tr>
	<tr>
		<td>
			<table>
				<tr>
					<td>
						<table cellpadding="0" cellspacing="0">
							<tr>									
								<td><input name="date_acompte_1" style="text" size="14" /></td>
								<td width="10px">&nbsp;</td>
								<td class="mid"><img src="../images/cal.png" onclick="ds_sh(form_fact.date_acompte_1);" title="Cliquez ici pour afficher le calendrier" ></td>
							</tr>
						</table>
					</td>
					<td><input type="text" name="montant_acompte_1" size="5" /></td>
					<td><input type="radio" name="mode_1" value="Espece" />Esp<input type="radio" name="mode_1" value="CB" />CB<input type="radio" name="mode_1" value="Flash3" />Flash3<input type="radio" name="mode_1" value="Pluriel" />Pluriel
					</td>
					<td class="bold">&nbsp;&nbsp;Infos : <input type="text" name="info_acompte_1" class="right" /></td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<table <?php echo $aff_table; ?> class="right" width="521px">
	<tr>
		<td class="bold right"><span id="leschamps_1"><input type="button" onclick="javascript:create_acompte_s3(1)" value="Ajouter un acompte" class="validation_tab" /></span></td>
	</tr>
</table>

Et le traitement du formulaire :

Code php :

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
for($j=0; $j<20; $j++)
{
	if($_POST['montant_acompte_'.$j]!=NULL)
	{
		$date_acompte=transfo_date_en($_POST['date_acompte_'.$j]);
		$mode=$_POST['mode_'.$j];
		$info_acompte=addslashes($_POST['info_acompte_'.$j]);
		$montant_acompte=$_POST['montant_acompte_'.$j];
 
		if($date_acompte=='--')
		{
			$date_acompte=$date_fact;
		}
 
		//insertion mysql
	}
}

Voilà j'ai vraiment du mal à comprendre ce qui cloche étant donné que l'affichage se fait correctement sur tous les navigateurs, mais seul l'insertion dans la base déconne. Le problème doit certainement venir de ma boucle for dans le traitement, mais pour quelle raison certains navigateurs ne trouvent pas mes autres champs, là je ne sais pas.

Je vous remercie par avance pour l'aide que vous pourrez m'apporter,

Welden

**SylvainPV** · 10/12/2012, 13h49

Bonjour,

comment se fait-il que dans le code du formulaire, je ne vois nulle part une balise <form> ? Pourrait-on avoir le code complet ?

**Welden** · 10/12/2012, 15h24

Merci pour la réponse. Voilà le formulaire complet. Il n'y a pas vraiment d"intérêt (j'ai juste remplacé les requêtes), mais le problème se situe au niveau des paiements (le formulaire comprend une partie avec les info du client pour la facture, une partie concernant le détail de la facture, une concernant le paiement et une le vendeur). Tout fonctionne sauf les paiements rajoutés avec le bouton et seulement sur ie9, ie10 et Chrome, pas tester d'autres. Et sachant que cela fonctionne très bien sur ie8 (logiciel initialement développé pour ce navigateur il y a 3 ou 4 ans).

Code php :

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
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<form method="post" name="form_fact" action="traitements/t_c_fact.php">
<input type="hidden" name="id_tiers" value="<?php echo $id_tiers; ?>" />
<input type="hidden" name="type_fact" value="fact" />
<input type="hidden" name="id_sensibilite_tiers" value="<?php echo $id_sensibilite_tiers_fact; ?>" />
<tr>
	<td width="390px" valign="top">
		<table class="fz12">
			<tr>
				<td align="center" class="bold">Civilite</td>
				<td align="center" class="bold">Nom</td>
				<td align="center" class="bold">Prénom</td>
			</tr>
			<tr>
				<td align="center"><input type="text" name="civilite_tiers" id="civilite_tiers" ></td>
				<td align="center"><input type="text" name="nom_tiers" onblur="this.value = this.value.toUpperCase();" /></td>
				<td align="center"><input type="text" name="prenom_tiers" /></td>
			</tr>
			<tr>
				<td align="center" class="bold">Adresse</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="6" class="center"><textarea name="adr_tiers" cols="44" rows="4" /></textarea></td>
			</tr>
			<tr>
				<td align="center" class="bold">CP</td>
				<td align="center" class="bold">Ville</td>
				<td align="center">&nbsp;</td>
			</tr>
			<tr>
				<td align="center"><input type="text" name="cp_tiers" maxlength="5" /></td>
				<td align="center"><input type="text" name="ville_tiers" onblur="this.value = this.value.toUpperCase();" /></td>
				<td align="center">&nbsp;</td>
			</tr>
			<tr>
				<td align="center" class="bold">Téléphone Fixe</td>
				<td align="center" class="bold">Téléphone Portable</td>
				<td align="center" class="bold">Télécopie</td>
			</tr>
			<tr>
				<td align="center"><input type="text" name="tel_fixe_tiers" /></td>
				<td align="center"><input type="text" name="tel_port_tiers" /></td>
				<td align="center"><input type="text" name="tel_fax_tiers" /></td>
			</tr>
			<tr>
				<td align="center" class="bold">Date de naissance</td>
				<td align="center" class="bold">Adresse mail</td>
				<td align="center" class="bold">Pseudo</td>
			</tr>
			<tr>
				<td>
					<input type="text" name="j_dn" size="2" maxlength="2" /> /
					<input type="text" name="m_dn" size="2" maxlength="2" /> /
					<input type="text" name="a_dn" size="4" maxlength="4" />
				</td>
				<td align="center"><input type="text" name="mail_tiers" /></td>
				<td align="center"><input type="text" name="pseudo" /></td>
			</tr>
		</table>
	</td>
	<td valign="top">
		<table class="tableau w100 fz12" <?php echo $aff_table; ?>>
			<tr class="titre_colonne">
				<td width="130px">N° Série</td>
				<td>Désignation</td>
				<td width="50px">Qté</td>
				<td width="100px">Prix Unitaire</td>
				<td width="100px">Montant</td>
			</tr>
			<?php
			if($_POST['montant_avoir']!=NULL && is_numeric($_POST['montant_avoir']) && $_POST['montant_avoir']>0 && $_POST['montant_avoir']<=$_POST['montant_avoir_defaut'])
			{
				requete
			}
			$total_fact='';
			//lignes de vente
			requete
			while($find_lignes_vente=mysql_fetch_array($search_lignes_vente))
			{
			?>
			<tr height="35px">
				<td><?php echo $find_lignes_vente['num_serie']; ?></td>
				<td><?php echo stripslashes($find_lignes_vente['prod']); ?></td>
				<td class="center"><?php echo unite($find_lignes_vente['qte']); ?></td>
				<td class="right"><?php echo $find_lignes_vente['pu_ttc']; ?></td>
				<td class="right bg_jaune"><?php echo nb_formate(round(($find_lignes_vente['qte']*$find_lignes_vente['pu_ttc']), "2")); ?></td>
			</tr>
			<?php
				$total_fact+=round(($find_lignes_vente['qte']*$find_lignes_vente['pu_ttc']), "2");
			}						
			?>
			<tr height="35px">
				<td colspan="3">&nbsp;</td>
				<td class="bold left">Net à payer</td>
				<td class="right bg_jaune"><?php echo nb_formate($total_fact); ?><input type="hidden" name="montant_ttc" value="<?php echo $total_fact; ?>" /></td>
			</tr>
		</table>
		<table>
			<tr>
				<td>
					<table>
						<tr>
							<td>
								<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;"><tr><td id="ds_calclass"></td></tr></table>
								<script type="text/javascript" language="javascript" src="../js/calendar.js"></script>
							</td>
						</tr>
						<?php
						if($_POST['devis_selected']!=NULL)
						{
							$devis_selected=$_POST['devis_selected'];
							$nb_acompte=count($_POST['devis_selected']);
							?>
							<tr>
								<td class="bold fz14 u">Ce client vous a déja versé :</td>
							</tr>
							<tr>
								<td>
									<table>
										<?php
										$somme_a_enlever='';
										for($i=0; $i<$nb_acompte; $i++)
										{
											//recherche du montant de l'acompte
											requete
											while($find_acompte_fact=mysql_fetch_array($search_acompte_fact))
											{
												$somme_a_enlever+=$find_acompte_fact['montant_acompte'];
											?>
											<tr>
												<td>Le <?php echo date_num_fr($find_acompte_fact['date_acompte']); ?> :<input type="hidden" name="id_acompte_selected[]" value="<?php echo $find_acompte_fact['id_acompte']; ?>"></td>
												<td><?php echo $find_acompte_fact['mode_reglement']; ?> :</td>
												<td class="right"><?php echo nb_formate($find_acompte_fact['montant_acompte']); ?> €</td>
												<td><?php echo stripslashes($find_acompte_fact['info_acompte']); ?></td>
											</tr>
											<?php
											}
										}
										?>
									</table>
								</td>
							</tr>
							<tr><td>&nbsp;</td></tr>
							<tr><td>&nbsp;</td></tr>
							<?php
							if(round(($total_fact-$somme_a_enlever), "2")>'0')
							{
							?>
							<tr>
								<td class="bold fz16">Vous devez encaisser <?php echo round(($total_fact-$somme_a_enlever), "2"); ?> €</td>
							</tr>
							<?php
							}
							elseif(round(($total_fact-$somme_a_enlever), "2")<='0')
							{
							?>
 
							<tr>
								<td class="bold fz16">Vous n'avez rien à encaisser</td>
							</tr>
							<?php
							}
							?>
							<tr><td>&nbsp;</td></tr>
							<tr><td>&nbsp;</td></tr>
							<?php
						}
						?>
						<tr>
							<td valign="top">
							<?php
							if($search_tiers['id_sensibilite_tiers']=='1' || $search_tiers['id_sensibilite_tiers']=='2')
							{
							?>
								<table>
									<tr>
										<td class="bold fz12">Mode de paiement 1</td>
									</tr>
									<tr>
										<td>
											<table>
												<tr>
													<td>
														<table cellpadding="0" cellspacing="0">
															<tr>									
																<td><input name="date_acompte_1" style="text" size="14" /></td>
																<td width="10px">&nbsp;</td>
																<td class="mid"><img src="../images/cal.png" onclick="ds_sh(form_fact.date_acompte_1);" title="Cliquez ici pour afficher le calendrier" ></td>
															</tr>
														</table>
													</td>
													<td><input type="text" name="montant_acompte_1" size="5" /></td>
													<td><input type="radio" name="mode_1" value="Cheque" />Chq<input type="radio" name="mode_1" value="Espece" />Esp<input type="radio" name="mode_1" value="CB" />CB<input type="radio" name="mode_1" value="Virement" />Vrt<input type="radio" name="mode_1" value="Flash3" />Flash3<input type="radio" name="mode_1" value="Pluriel" />Pluriel
													</td>
													<td class="bold">&nbsp;&nbsp;Infos : <input type="text" name="info_acompte_1" class="right" /></td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
								<table <?php echo $aff_table; ?> class="right" width="598px">
									<tr>
										<td class="bold right"><span id="leschamps_1"><input type="button" onclick="javascript:create_acompte_s12(1)" value="Ajouter une ligne" class="validation_tab" /></span></td>
									</tr>
								</table>
							</td>
							<?php
							}
							if($search_tiers['id_sensibilite_tiers']=='3' || $search_tiers['id_sensibilite_tiers']=='0')
							{
							?>
								<table>
									<tr>
										<td class="bold fz12">Mode de paiement 1</td>
									</tr>
									<tr>
										<td>
											<table>
												<tr>
													<td>
														<table cellpadding="0" cellspacing="0">
															<tr>									
																<td><input name="date_acompte_1" style="text" size="14" /></td>
																<td width="10px">&nbsp;</td>
																<td class="mid"><img src="../images/cal.png" onclick="ds_sh(form_fact.date_acompte_1);" title="Cliquez ici pour afficher le calendrier" ></td>
															</tr>
														</table>
													</td>
													<td><input type="text" name="montant_acompte_1" size="5" /></td>
													<td><input type="radio" name="mode_1" value="Espece" />Esp<input type="radio" name="mode_1" value="CB" />CB<input type="radio" name="mode_1" value="Flash3" />Flash3<input type="radio" name="mode_1" value="Pluriel" />Pluriel
													</td>
													<td class="bold">&nbsp;&nbsp;Infos : <input type="text" name="info_acompte_1" class="right" /></td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
								<table <?php echo $aff_table; ?> class="right" width="521px">
									<tr>
										<td class="bold right"><span id="leschamps_1"><input type="button" onclick="javascript:create_acompte_s3(1)" value="Ajouter un acompte" class="validation_tab" /></span></td>
									</tr>
								</table>
							</td>
							<?php
							}
							?>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td class="bold">
					Associer la vente à :
					<select name="id_vendeur">
						<option value="0">Sélectionnez</option>
						<?php
						//requete
						while($find_vendeurs=mysql_fetch_array($search_vendeurs))
						{
							echo '<option value="'.$find_vendeurs['id_user'].'">'.premiere_lettre_maj($find_vendeurs['login_user']).'</option>';
						}
						?>
					</select>
				</td>
			</tr>
			<?php
			if($nivo_user<=$societes_1['nivo_acces'])
			{
			?>
			<tr>
				<td class="bold">
					Veuillez sélectionner la société sur laquelle vous souhaitez facturer :
					<select name="id_societe">
						<?php
						//requete
						while($find_ste_fact=mysql_fetch_array($search_ste_fact))
						{
							echo '<option value="'.$find_ste_fact['id_societe'].'">'.$find_ste_fact['nom_societe'].'</option>';
						}
						?>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>									
							<td class="bold">Date de la facture : <input name="date_fact" style="text" size="14" value="<?php echo transfo_date_fr($today); ?>" /></td>
							<td width="10px">&nbsp;</td>
							<td class="mid"><img src="../images/cal.png" onclick="ds_sh(form_fact.date_fact);" title="Cliquez ici pour afficher le calendrier" ></td>
						</tr>
					</table>
				</td>
			</tr>
			<?php
			}
			else
			{
				echo '<input type="hidden" name="id_societe" value="1" />';
				echo '<input type="hidden" name="date_fact" value="'.transfo_date_fr($today).'" />';
			}
			if($id_sensibilite_tiers_fact=='4')
			{
			?>
			<tr>
				<td class="fz14 bold rouge center">Attention, on ne peut pas vendre à ce client pour la raison ci-dessous.<br />Soyez pédagogue pour expliquer au client, ou appelez un responsable.<br /><br /><br /><span class="noir"><?php echo stripslashes($search_tiers['motif_sensibilite']); ?></span></td>
			</tr>
			<?php
			}
			else
			{
			?>
			<tr>
				<td class="center"><input type="submit" name="facturer" value="Facturer" class="validation" onclick="return(confirm('Valider définitivement votre facture?'))" /></td>
			</tr>
			<?php
			}
			?>
		</table>
	</td>
</tr>
</form>

**Bovino** · 10/12/2012, 18h34

Il n'y a pas vraiment d"intérêt

Si ! Celui de voir que la balise <form> entoure des balises <tr> ce qui n'est pas autorisé !

La balise <form> doit soit englober la table complète, soit être à l'intérieur d'une unique balise <td>.

Ton code HTML est à revoir...

**sekaijin** · 13/12/2012, 07h55

mieux IE est plus stric sur le sujet il suit de près le W3C sur ce point

toute balise comprise entre table et tbody et entre tbody et tr ne sont pas autorisées.

IE les place donc Avant la table

Code html :

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

1
2
3
4
5
6
7
<table>
 <from>
  <tr>
    <td></td>
  </tr>
 </form>
</table>

n'est pas conforme celon le W3C (les navigateur vont donc tenté d'en faire une truc conforme)
les vieille version d'IE ne regardaient pas vraiment et produisaient

Code html :

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

1
2
3
4
5
6
7
<from>
 <table>
  <tr>
    <td></td>
  </tr>
 </table>
</form>

Mais IE9 lui est plus strict et produit lui

Code html :

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

1
2
3
4
5
6
7
8
9
<from>
</form>
<table>
 <tbody>
  <tr>
    <td></td>
  </tr>
 </tbody>
</table>

et OOPS la table n'est plus dans le form
le code à fournir est

Code html :

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

1
2
3
4
5
6
7
8
9
<from>
 <table>
  <tbody>
   <tr>
    <td></td>
   </tr>
  </tbody>
 </table>
</form>

si tu ne mets pas le tbody IE le rajoutera
je conseille de TOUJOURS le mettre dans toutes les tables

A+JYT

Formulaire, javascript et compatibilité navigateurs

JavaScript

Discussions similaires

Partager

Partager