[DOM] Ajout d'element dans un formulaire

Version imprimable

Bonjour ...
etant debutant sous javascript ,
j'essaie de mettre en place un systeme permettant de rajouter des lignes dans un formulaire ..

Jusque la je n'ai pas eu trop de soucis ...
j'utilises pour ça ce script
Code:

1 2 3 4 5 6 7 8 9 10 11 <script> function create_champ(i) { var i2 = i + 1; document.getElementById('leschamps_'+i).innerHTML = '<input type="file" name="fichier_'+i+'"></span>'; document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : ''; } </script>
qui fonctionne parfaitement lorsque j'utilises des données de formulaire classique ..

j'aimerais pouvoir y integrer un evenement javascript pour ouvrir un selecteur de date , mais lorsque j'integre le code du selecteur rien ne se passe aucun nouveau champs n'apparait et il semblerait que le probleme vienne de l'evenement onclick..

donc je suppose que ma syntaxe n'est pas correcte.
voila ce que ça donne quand ça ne marche pas ...

je ne sais pas si le document.getElementByid est la bonne solution

j'ai tout mis dans une variable text histoire de pouvoir faire des essais .
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script> function create_champ2(z) { var z2 = z + 1; text='<input id="dob'+z+'" name="dob'+z+'" size="10" maxlength="10" type="text"><img src="js/calendar.gif" onclick="showChooser(this, 'dob', 'chooserSpan', 1950, 2010, 'd/m/Y', false)"> <div id="chooserSpan" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"> ' ; document.getElementById('date_'+z).innerHTML =text; document.getElementById('date_'+z).innerHTML +='<input name="var_boucle_date" type="hidden" value="'+z+'">'; document.getElementById('date_'+z).innerHTML += (z <= 100) ? '<br /><span id="date_'+z2+'"><a href="javascript:create_champ2('+z2+')">Ajouter une date</a></span>' : ''; } </script>
merci d'avance .

07/01/2008, 21h20
SpaceFrog
hum hum ...
créer des elements de formulaire au moyen d'un innerHTML :vomi:

regarde plutot du coté du DOM avec
Code:

1 2 var monbouton=document.createElement('img') monbouton.src="....";
et lui attribuer un onclick:

Code:

monbouton.onclick=function(){showChooser(this, 'dob', 'chooserSpan', 1950, 2010, 'd/m/Y', false)}
08/01/2008, 19h16
mat2424

c'est si pas bo que ça ??? !!:aie:
ça fonctionne sur une liste déroulante avec du php mais.... !!!!

ok je vais regarder le truc ....

je vais essayer de comprendre la demarche

merci la grenouille de l'espace .........

Hello j'ai bossé sur la fonction mais toujours des soucis !!!

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
 
<script type="text/javascript">
var num=0;
function ajout()
 
    {  //creation du champs de texte
        var i=document.createElement("input");
        i.type="text";
        i.id="dob"+num;
        i.name="dob"+num;
 
        //creation du div conteneur
	var d=document.createElement("div");
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
 
        //création du bouton image	
	var b=document.createElement("img");
        b.src="js/calendar.gif";
    	b.onclick=function() { showChooser(this, 'dob'+num, 'chooserSpan'+num, 1950, 2010, 'd/m/Y', false); }
 		d.appendChild(b);
 
//création de l'element div affichant le calendrier
		var a=document.createElement("div");
 		a.style.width='160px';
		a.style.display='none';
		a.style.visibility='hidden';
		a.className='dateChooser select-free';
		a.id="chooserSpan"+num;
 		b.appendChild(a);
 
        num++;
    }
</script>
 
 
<div    id="divFichiers"></div>
<a href="javascript:void(ajout());" class="test">Ajouter un champ</a></p>
 
<script type="text/javascript">
    ajout();
</script>

l'ajout de champs est correct mais le calendrier n'apparait pas ....
je suppose une erreur par ici :

Code:

1
2
b.onclick=function() { showChooser(this, 'dob'+num, 'chooserSpan'+num, 1950, 2010, 'd/m/Y', false); }
 		d.appendChild(b);

par contre j'ai remplacé l'id dob+num par un id existant et le calendrier ne semble toujours pas vouloir s'ouvrir ....

le but final etant de créer un selecteur de date pouvant etre dupliqué afin de choisir plusieurs date qui seront ensuite traitées en php ....

help !!

09/01/2008, 15h09
mat2424

J'ai fais quelques essais j'ai remplacé la fonction calendrier :
showChooser(this, 'dob'+num, 'chooserSpan'+num, 1950, 2010, 'd/m/Y', false);*

par un message d'alerte du type alert('blabla'+num);

et je me rends compte que num me retourne toujours le dernier resulat de la variable num ? !

donc deja la ça va pas du tout !!!!!

Bon effectivement (je me parle hein :mrgreen:)

après avoir fais quelques essais, il se trouve que dans la creation de mon bouton/image :
Code:

1 2 3 4 5 var b=document.createElement("img"); b.src="js/calendar.gif"; b.id="bout"+num; b.onclick=function() { showChooser('bout'+num, 'dob'+num, 'chooserSpan'+num, 1950, 2010, 'd/m/Y', false); } d.appendChild(b);
la fonction showChooser est tout le temps incrémentée de 1 quoi qu'il se passe elle sera toujours de 1 de plus que les différents input créés !!!!

la valeur de cette fonction est fixe et pas du tout en relation avec les input mais seulement la valeur au moment t de la variable num.
grrrrrrr
du coup je sais pas comment procéder pour que les éléments de cette fonction correspondent aux input ....

09/01/2008, 18h58
mat2424

Je suppose que la valeur du num de la fonction est recuperé au moment de l'execution de celle ci et pas par rapport a sa situation dans le code !

ayuda!!!help !

il y a un autre post sur la page qui parle du problème d'attribution de onclick avec paramètres ...

Code:

1
2
3
4
5
6
var b=document.createElement("img");
        b.src="js/calendar.gif";
	b.id="bout"+num;
        b.Num=num
    	b.onclick=function() { showChooser('bout'+this.Num, 'dob'+this.Num, 'chooserSpan'+this.Num, 1950, 2010, 'd/m/Y', false); }
 		d.appendChild(b);

10/01/2008, 08h00
mat2424

si tu parles de ce post ..
http://www.developpez.net/forums/sho...k+param%E8tres
je vais tester !

Rotudju !!!!

bon ben ça y'est j'ai finalement trouvé mes erreurs !!!!
a marche !!!

donc le code javascript :
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 <script type="text/javascript"> var num=0; function ajout() { var i=document.createElement("input"); i.type="text"; i.id="dob"+num; i.name="dob"+num; document.getElementById( 'divFichiers' ).appendChild(i) var b=document.createElement("img"); b.src="js/calendar.gif"; b.param=num; b.id="bout"+num; b.onclick=function() { showChooser('bout'+b.param, 'dob'+b.param, 'chooserSpan'+b.param, 1950, 2010, 'd/m/Y', false); }; // b.onclick=function() { alert(b.param);}; document.getElementById( 'divFichiers' ).appendChild(b) var a=document.createElement("div"); a.style.width='160px'; a.style.display='none'; a.style.visibility='hidden'; a.className='dateChooser select-free'; a.id="chooserSpan"+num; document.getElementById( 'divFichiers' ).appendChild(a) var x=document.createElement('br'); document.getElementById( 'divFichiers' ).appendChild(x) num++; } </script>
et l'action html
Code:

1 2 3 4 5 6 <div id="divFichiers"></div> <a href="javascript:void(ajout());" class="titreRubrique">Ajouter un date</a></p> <script type="text/javascript"> ajout(); </script>
le probleme etait situé a plusieurs endroit d'une part la definition des arguments du onclick posait probleme du fait de l'incrementation de la variable num , j'ai donc créé la variable b.param=num; afin d'accéder au numero réél du bouton .

Ensuite en visionnant le code je me suis aperçu que le calendrier s'affichait mais pas sur la page ....

l'erreur venait tout simplement de mon utilisation de appendChild puisque je créait a chaque fois un noeud enfant dans le noeud précédent en cascade , du coup le calendrier existait mais au sein de ma balise image.

j'ai donc reattribué appenchild de tout les elements afin qu'il soient tous enfant du div conteneur !!!!

ouf ....

j'ai appris pas mal de truc ....

merci pour les quelques directives