Bonjour à tous,

Je ne suis pas du tout expert en langages Web, et je ne sais pas trop si mon soucis vient de HTML ou Javascript.
Je vais essayer d'expliquer au mieux mon problème.

J'ai un formulaire HTML avec un nombre indéterminé de listes déroulantes. Elles sont toujours liées par paire (1 = "Fréquence de prélèvement"; 2 = "Date d'effet").
Au changement de valeur de la première liste, je veux mettre à jour la seconde selon le choix de la première. Alors ça fonctionne plutôt bien, car au changement de valeur de ma liste "Fréquence de prélèvement" j'obtiens les valeurs que je souhaite dans ma liste "date d'effet". Le problème étant que je perds mon style CSS. Enfin c'est l'impression que j'ai. Voir Image ci-dessous.

Nom : styleCSS.png Affichages : 196 Taille : 5,7 Ko

Voici le code HTML de ma form
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
 
<? $i++; ?>
<table border="0" cellspacing="0" cellpadding="0" align="center" class="tab03">
<caption>&nbsp; Contrat &nbsp;</caption>
    <tr>	
        <td>Fréquence de prélèvement</td>
	<td colspan="9" >
	    <select id="frequence<? echo $i ?>" name="frequence<? echo $i ?>" onchange="dateEffet(<? echo $i ?>);">
		    <option value="M" <? if ($resultat["fractionnement"]=="M"){ echo 'selected = "selected"';}?>>Mensuel</option>
		    <option value="T" <? if ($resultat["fractionnement"]=="T"){ echo 'selected = "selected"';}?>>Trimestriel</option>										
	    </select>
	    <input type="hidden" name="frequence_old<? echo $i ?>" size="1" value="<? echo $resultat["fractionnement"];?>">
	    <input type="hidden" name="contrat<? echo $i ?>" size="1" value="<? echo $resultat["type_con"];?>">
	</td>
    </tr>
    <tr id="dateEffet<? echo $i ?>">
 
    </tr>
</table>

Ma fonction Javascript "dateEffet()" appelée est la suivante

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
	<script type="text/javascript">
	function dateEffet(index){
		var choix = document.getElementById("frequence" + index).value;
		var frequence_old = document.forms['contact'].elements['frequence_old' + index].value;
		var liste ="";
		if (choix != frequence_old){
			var date = new Date();
			var mois = date.getMonth()+1;
			var annee = date.getFullYear();
			var i;
			var j;
			var k = 1;
			var mois_var = "";
			liste = '<td>Date d\'effet voulue</td><td colspan="9"><select id="selDateEffet' + index + '" name="selDateEffet' + index + '">';
			if(choix == "M"){
				//Si on est en décembre le 1er choix de la liste sera le janvier de l'année N+1
				if(mois == 12){
					mois = 1;
					annee++;
				}else{
					mois++;
				}
				var anneeMax = annee + 1;	//On détermine l'année maximum
				for(i = annee; i <= anneeMax; i++){
					for(j = mois; j < 13; j++){
						if(j < 10){
							mois_var = "0" + j;
						}else{
							mois_var = j;
						}
						if(k == 1){
							liste += '<option value="' + i + mois_var + '01" \'selected = "selected"\'>01/' + mois_var + '/' + i + '</option>';
						}else{
							liste += '<option value="' + i + mois_var + '01">01/' + mois_var + '/' + i + '</option>';
						}
						if(j == 12){	//Si on se trouve sur la dernière occurence de l'année on indique que le mois de l'année suivante est janvier
							mois = 1;
						}
						k++;
					}
				}
			}else if(choix == "T"){
				//A partir d'octobre on se place sur l'année suivante
				if(mois >= 10){
					mois = 1;
					annee++;
				}
				var anneeMax = annee + 1;	//On détermine l'année maximum
				for(i = annee; i <= anneeMax; i++){
					for(j = mois; j < 13; j = j + 3){
						if(j < 10){
							mois_var = "0" + j;
						}else{
							mois_var = j;
						}
						if(k == 1){
							liste += '<option value="' + i + mois_var + '01" \'selected = "selected"\'>01/' + mois_var + '/' + i + '</option>';
						}else{
							liste += '<option value="' + i + mois_var + '01">01/' + mois_var + '/' + i + '</option>';
						}
						if(j == 10){	//Si on se trouve sur la dernière occurence (octobre quand on est en trimestriel) de l'année on indique que le mois de l'année suivante est janvier
							mois = 1;
						}
						k++;
					}
				}
			}
			liste += '</select></td>';
			alert(liste);
			document.getElementById('dateEffet' + index).innerHTML = liste;
		}
		else{
			document.getElementById('dateEffet' + index).innerHTML = '';
		}
	}
	</script>
Donc avec ce code, Je perds mon style CSS comme indiqué sur l'image précédente. Je ne sais pas pour quelle raison...

J'ai essayé de changer mon code pour créer le <select id="selDateEffet"<? echo $i ?> dans mon code HTML et de juste alimenter les balises <option> avec ma fonction javascript mais ça ne fonctionne pas du tout...

Si quelqu'un a une idée.

Merci d'avance.