Bouton on click

Version imprimable

Bouton on click

Comment appeler une autre fonction présente dans la page grâce au "onclick"???

j'ai crée une fonction ajout d'un champ input et a côte un bouton permettant d'inserer le nom de l'image.
soucis : à l'endroit en gras, j'aimerais appeler l'autre fonction tout en bas, celle qui s'apelle function inserer_nom(num), comment dois-je faire?

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
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier";
        i.name="fichier[]";
        
		
        var d=document.createElement("div"); 
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
	
        var b=document.createElement("input");
        b.type="button";
        b.value="inserer nom image";
b.onClick="inserer_nom('+num+')";
       b.width="120";
      
       var c=document.createElement("input");	
       c.type="button"; 
       c.value="Supprimer"; //nom du bouton
       c.onclick=function()	{			this.parentNode.style.display="none"; 		this.parentNode.innerHTML="";	}
       c.width="81"; 
        d.appendChild(b);
        d.appendChild(c);
        num++;
    }
function inserer_nom(num) {    
var text = document.getElementById('fichier_'+num).value; 
var fichier = text.substr(text.lastIndexOf('\\')+1);     document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}

06/07/2007, 09h47
E.Bzz

Bonjour,

Citation:

Envoyé par cathy9999

comment dois-je faire?

presque comme tu as fait

Code:

b.onclick="inserer_nom('"+num+"')";

A+
06/07/2007, 09h53
cathy9999

Ca ne marche pas! je t'explique mon soucis :
J'ai crée un champ input file seul au départ, et l'utilisateur à l'aide d'un bouton "ajouter nouveau champ", peut en ajouter plusieurs pour uploader plusieurs fichiers. Jusqu'a là c'est tout bon.
Comme j'ai une textarea, je propose à l'utilisateur d'insérer directement le nom de l'image grâce à un bouton 'inserer nom image' avant d'êrte uploader! ma fonction marche super bien pour le premier champ input file mais pas les autres, comment dois-je faire ??
06/07/2007, 09h57
E.Bzz

Citation:

Envoyé par cathy9999

ma fonction marche super bien pour le premier champ input file mais pas les autres, comment dois-je faire ??

Effectivement !
Sûrement dû au fait que tu leur donne tous le même ID (or il doit absolument être unique).
Essaye qqchose comme

Code:

i.id="fichier_"+num;

A+
06/07/2007, 10h00
cathy9999

Non plus, marche pas!
Pour mon premier champ, je l'ai traité ainsi
<input type="file" name="fichier_1" id="fichier_1" />
<input name="button" type="button" onClick="inserer_nom('1')" value="Inserer nom image"/>
06/07/2007, 10h05
E.Bzz

Le nouvel ID n'est-il pas en conflit avec un autre existant ?

Citation:

Envoyé par cathy9999

Non plus, marche pas!

C'est à dire ?
Erreur ou pas ?

non le seul id que j'ai pour les champs input c'est id="fichier_1"

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
var num=0;
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier_"+num;
        i.name="fichier[]";
 
 
	var d=document.createElement("div"); 
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
 
	var b=document.createElement("input");
        b.type="button";
        b.value="inserer nom image";
		b.onclick="inserer_nom('"+num+"')";
		b.width="120";
 
		var c=document.createElement("input");	// ajout du bouton pour supprimer
		c.type="button";
		c.value="Supprimer"; //nom du bouton
		c.onclick=function()	{			this.parentNode.style.display="none"; 		this.parentNode.innerHTML="";	}
		c.width="81"; //Taille du bouton
        d.appendChild(b);
        d.appendChild(c);
        num++;
    }

Code:

1
2
3
4
function inserer_nom(num) 
{    var text = document.getElementById("fichier_"+num).value; 
    var fichier = text.substr(text.lastIndexOf('\\')+1);     document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}

Code:

1
2
<input type="file" name="fichier_1" id="fichier_1" /><input name="button" type="button" onClick="inserer_nom('1')" value="Inserer nom image" style="width:120px; "/>
<div    id="divFichiers"><a href="javascript:void(ajout());" class="titreRubrique">Ajouter un champ</a></div></p>

06/07/2007, 11h22
E.Bzz

Il ne faut pas nommer ton paramètre "num" : c'est déjà une variable globale.

De plus, tu a un id="fichier_1".
Puis tu appelles inserer_nom('1')

Ca va te faire un second id="fichier_1" il me semble.

Donc tu en auras 2 ... et c'est pas bon :mrgreen:
06/07/2007, 11h26
cathy9999

comment dois je faire alors?
06/07/2007, 11h33
E.Bzz

Citation:

Envoyé par cathy9999

comment dois je faire alors?

Ben ... commence par donner à celui qui "en dur" dans la page

Code:

id="fichier_0"

:?

Et si je change et que je ne crée pas de champs de départ! je veux dire que direct j'appuie sur "ajout d'un champ" et que cela me crée un champ mais que dois-je changer là pour que ca marche l'insertion du nom ?

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
var num=0;
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier_"+num;
        i.name="fichier[]";
 
 
	var d=document.createElement("div"); 
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
 
	var b=document.createElement("input");
        b.type="button";
        b.value="inserer nom image";
		b.onClick=function () 
{    var text = document.getElementById('fichier_'+num).value; 
    var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier "\"
    document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}
		b.width="120";
 
		var c=document.createElement("input");	// ajout du bouton pour supprimer
		c.type="button";
		c.value="Supprimer"; //nom du bouton
		c.onclick=function()	{	//lors du clique, appel de la fonction qui suit
		this.parentNode.style.display="none"; //suppresion d'un champ input
		this.parentNode.innerHTML="";	}
		c.width="81"; //Taille du bouton
        d.appendChild(b);
        d.appendChild(c);
        num++;
    }

06/07/2007, 11h44
E.Bzz

Citation:

Envoyé par E.Bzz

Ben ... commence par donner à celui qui "en dur" dans la page

Code:

id="fichier_0"

:?

Essaye déjà ça.
C'est plus simple à faire, et ça t'évitera des modif inutiles. Le pb est peut-être simplement qu'il y a d'autres erreurs dans ta page :mrgreen:

A+
06/07/2007, 11h46
cathy9999

Non mais non vu que j'ai supprimé ce champ, une erreur doit venir de ma fonction ! toute la partie que j'ai mise est celle qui traite des champs, la synthaxe me plait comme elle est, c'est juste le bouton 'inserer nom' qui marche pas!

Cela :

Code:

1
2
3
4
5
b.onClick=function () 
{    var text = document.getElementByid("fichier_"+num).value; 
    var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier "\"
    document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}

Je dois le changer comme cela, sous la même forme que mon bouton supprimer mais je ne sais pas faire :

Code:

1
2
3
c.onclick=function()	{	
this.parentNode.style.display="none"; 
this.parentNode.innerHTML="";	}

On m'a indiqué de faire genre comme cela, mais je susi perdue, peux tu m'aider...??:

Code:

1
2
3
4
 b.onclick=function() { inserer_nom(this); }
 avec un modif dans la fonction inserer_nom.    ( car dans ce cas on ne peut pas utiliser num )
var text = num.parentNode.getElementsByTagName("input")[0].value;
 this.parentNode.name="";

06/07/2007, 11h59
E.Bzz

Citation:

Envoyé par cathy9999

( car dans ce cas on ne peut pas utiliser num )

Aucune raison : aux dernières nouvelles c'étaient une variable globale ...

Citation:

var text = num.parentNode.getElementsByTagName("input")[0].value;

Là par contre, ça veut rien dire, num étant une variable texte ... :?

Comme cela? si oui cela marche pas snif snif

Code:

1
2
3
4
5
6
function inserer_nom(num) 
{   
var text = num.parentNode.getElementsByTagName("input")[0].value;
var fichier = text.substr(text.lastIndexOf('\\')+1); 
document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}

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
var num=0;
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier_"+num;
        i.name="fichier[]";
 
var d=document.createElement("div"); 
d.appendChild(i);
document.getElementById( 'divFichiers' ).appendChild(d);
 
var b=document.createElement("input");
b.type="button";
b.value="inserer nom image";
b.onClick=function() { inserer_nom(this); }
b.width="120";
 
var c=document.createElement("input");
c.type="button";
c.value="Supprimer"; //nom du bouton
c.onclick=function()	{	
this.parentNode.style.display="none"; 
this.parentNode.innerHTML="";	}
c.width="81"; //Taille du bouton
        d.appendChild(b);
        d.appendChild(c);
        num++;
    }

06/07/2007, 12h10
E.Bzz

A mon avis tu t'éloignes trop (et en rajoutant des erreur : cf. mes remarques sur "num").
Tu devrais repartir de ta version de départ. Il me semble que c'est la plus proche de la solution ;)

A+
06/07/2007, 12h13
E.Bzz

Il me semble qu'en repartant de ton code initial, et en effectuant les
2 corrections ci-dessous, tu devrais pas être loin

Citation:

Envoyé par E.Bzz

presque comme tu as fait

Code:

b.onclick="inserer_nom('"+num+"')";

Citation:

Envoyé par E.Bzz

Ben ... commence par donner à celui qui "en dur" dans la page

Code:

id="fichier_0"

:?

;)

A+
06/07/2007, 12h14
E.Bzz

... et ne passe plus "num" en paramètre : c'est une variable globale, et elle est directement accessible de toutes les fonctions de ta page ...

Non a présent je souhaite garder cette synthaxe car l'aspect visuel pour l'utilisateur qui s'en servira sera beaucoup mieux et il y'a un beug quelque part mais je ne sais où

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
var num=0;
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier_"+num;
        i.name="fichier[]";
 
 
	var d=document.createElement("div"); 
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
 
	var b=document.createElement("input");
        b.type="button";
        b.value="inserer nom image";
		b.onClick=function() { inserer_nom(this); }
 
		b.width="120";
 
		var c=document.createElement("input");	// ajout du bouton pour supprimer
		c.type="button";
		c.value="Supprimer"; //nom du bouton
		c.onclick=function()	{	//lors du clique, appel de la fonction qui suit
		this.parentNode.style.display="none"; //suppresion d'un champ input
		this.parentNode.getElementsByTagName("input")[0].name=""; 
}
		//this.parentNode.innerHTML="";	
		c.width="81"; //Taille du bouton
        d.appendChild(b);
        d.appendChild(c);
        num++;
    }
 
function inserer_nom(num) 
{    //var text = document.getElementById('fichier_'+num).value; 
 var text = num.parentNode.getElementsByTagName("input")[0].value;
    var fichier = text.substr(text.lastIndexOf('\\')+1); //LastIndexOf recuperes le dernier "\"
    document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}

SOLUTION :

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
<script type="text/javascript">
var num=0;
function ajout()
    {   var i=document.createElement("input");
        i.type="file";
        i.id="fichier_"+num;
        i.name="fichier[]";
        var d=document.createElement("div");
        d.appendChild(i);
        document.getElementById( 'divFichiers' ).appendChild(d);
 var b=document.createElement("input");
        b.type="button";
        b.value="inserer nom image";
    b.onclick=function() { inserer_nom(this); }
  b.width="120";
  d.appendChild(b);
 var c=document.createElement("input"); // ajout du bouton pour supprimer
  c.type="button";
  c.value="Supprimer"; //nom du bouton
  c.onclick=function() { //lors du clique, appel de la fonction qui suit
  this.parentNode.style.display="none"; //suppresion d'un champ input
  this.parentNode.getElementsByTagName("input")[0].name=""; }
  c.width="81"; //Taille du bouton
        d.appendChild(c);
        num++;
    }
function inserer_nom(num)
{  var text = num.parentNode.getElementsByTagName("input")[0].value;
   var fichier = text.substr(text.lastIndexOf('\\')+1); 
   document.getElementById('textarea').value+= '[img]'+fichier+'[/img]\n';
}
</script>
<div    id="divFichiers"></div>
<a href="javascript:void(ajout());" class="titreRubrique">Ajouter un champ</a></p>
<textarea id="textarea"></textarea>
 
<script type="text/javascript"><!-- à la place du 1er bouton...-->
    ajout();
</script>