Discussion :

[mat2424]

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 :

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

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 :

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

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 .

[SpaceFrog]

hum hum ...
créer des elements de formulaire au moyen d'un innerHTML

regarde plutot du coté du DOM avec

Code :

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

1
2
var monbouton=document.createElement('img')
monbouton.src="....";

et lui attribuer un onclick:

Code :

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

monbouton.onclick=function(){showChooser(this, 'dob', 'chooserSpan', 1950, 2010, 'd/m/Y', false)}

[mat2424]

c'est si pas bo que ça ??? !!
ç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 .........

[mat2424]

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

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
 
<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 :

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

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 !!

[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 !!!!!

[mat2424]

Bon effectivement (je me parle hein )

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

Code :

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

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 ....