ajout dynamique d'options à une liste
Bonjour à tous.
Dans le cadre de mon stage de dois faire un site web et j'ai un petit problème avec des listes.
En fait, pour le formulaire d'inscription sur le site, je dois demander la date de naissance avec 3 listes : une pour le jour, une pour le mois et la derniere pour l'année. (je sais ca aurait été beaucoup plus simple de demander à l'utilisateur de rentrer la date sous un format imposé, mais les listes sont imposés hélas)
Mon problème est que pour les jours et les années j'aimerai générer ça dynamiquement (surtout pour les années, je me vois mal écrire en dur dans le code toutes les années de 1960 à maintenant). J'ai déjà tenter plusieurs facon de l'écrire en Javascript mais aucune ne réussi.
Mon code source .html
Code:
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
|
<html>
<head>
<script type="text/javascript" src="form_fr.js"></script>
<body>
<h2> <center> Enregistrer un nouvel utilisateur </center></h2>
Créez vous un compte gratuit.</br>
Complétez le formulaire avec vos données personnelles.</br>
<form method="POST" action="" id="inscription_form">
<TABLE width="550" border="0" cellpadding="0" cellspacing="0" >
<TR>
<TD>Prenom </TD>
<TD><input type="text" name="firstname" /></TD>
</TR>
<TR>
<TD>Nom</TD>
<TD><input type="text" name="name" /></TD>
</TR>
<TR>
<TD>Sexe</TD>
<TD><SELECT name="sex" size="1">
<OPTION value="men">homme</option>
<OPTION value="women">femme</option>
</SELECT>
</TD>
</TR>
<TR>
<TD>Date de naissance</TD>
<TD> <SELECT id="lst_day" name="lst_day" size="1">
<OPTION value="0">Jour</option>
</SELECT>
<SELECT id="lst_month" name="lst_month" size="1">
<OPTION value="0">Mois</option>
<option value="janvier">janvier</option>
<option value="fevrier">février</option>
<option value="mars">mars</option>
<option value="avril">avril</option>
<option value="mai">mai</option>
<option value="juin">juin</option>
<option value="juillet">juillet</option>
<option value="aout">aout</option>
<option value="septembre">septembre</option>
<option value="octobre">octobre</option>
<option value="novembre">novembre</option>
<option value="decembre">décembre</option>
</SELECT>
<SELECT id="lst_year" name="lst_year" size="1">
<OPTION value="0">Année</option>
</SELECT>
</TD>
</TR>
</table>
</form>
</body>
</html> |
Mon code source .js avec les différents test
Code:
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
|
var lst_day = document.getElementById("lst_day")
var lst_year = document.getElementById("lst_year")
var form = document.getElementById("inscription_form")
function load() {
var i;
var j;
/*for(i=1,i<31,i++)
{
var type = document.form.lst_day.options[document.form.lst_day.selectedIndex].value;
var noeud_element = document.createElement(type);
var noeud_texte = document.createTextNode(document.form.lst_day.value);
noeud_element.appendChild(noeud_texte);
document.lst_day.appendChild(noeud_element);
}*/
/*for(i=1,i<31,i++)
{
var nouvel_element = new Option(form.lst_day.text,form.lst_day.value);
nouvel_element.value = i;
nouvel_element.text = i;
form.lst_day.options = nouvel_element;
}*/
/* for(i=1,i<31,i++)
{
opt = document.createElement ("option");
opt.value=i;
opt.text=i;
lst_day.appendChild(opt)
} */
for(i=1,i<31,i++)
{
var s = document.forms["inscription_form"].elements["lst_day"];
s.options[s.options.length] = new Option(i);
}
}
window.onLoad=load |
Si quelqu'un à une idée, merci d'avance.
