Plusieurs formulaires et récupération d'élément

Version imprimable

Bonjour tout le monde,

Alors voilà, j'ai une page avec plusieurs formulaires dans lesquels on peut insérer des émoticones en JS.

Mon script fonctionne s'il n'y a qu'un seul formulaire, mais ne fonctionne plus s'il y en a plusieurs.

Voici les codes :

Le JS :

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
 
<script language="JavaScript" type="text/javascript">
function emoticon(text)
{
	var txtarea = document.commentaire.message;
	text = ' ' + text + ' ';
	 if (txtarea.selectionEnd >= 0 && txtarea.setSelectionRange)
	 { 
		var textLength = txtarea.textLength;
		var selEnd = txtarea.selectionEnd;
		var s1 = (txtarea.value).substring(0, selEnd);
		var s2 = (txtarea.value).substring(selEnd, textLength);
		txtarea.value = s1 + text + s2;
		txtarea.setSelectionRange(selEnd+text.length, selEnd+text.length);
		txtarea.focus();
	}
	else if (txtarea.createTextRange && txtarea.caretPos)
	{
		var caretPos = txtarea.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
		txtarea.focus();
	}
	else
	{
		txtarea.value+= text;
		txtarea.focus();
	}
}
</script>

Le HTML :

Code:

1
2
3
4
5
6
7
<form name="commentaire" method="post">
<div class="form_conteneur">
<div class="form_label">Pseudo</div>
<div class="form_champ"><input type="text" name="pseudo" class="form_balise" /></div>
<div class="form_label">Message</div>
<div class="form_champ"><textarea name="message" class="form_balise" style="height : 200px;"></textarea></div>
</div>

Et la manière dont sont appelées les émoticones :

Code:

1
2
3
4
5
<a onclick="javascript:emoticon(':lol:')" style="border-bottom-style: none;"><img src="/images/emotic/smile.gif" border="0"></a>
<a onclick="javascript:emoticon(':paslol:')" style="border-bottom-style: none;"><img src="/images/emotic/cry.gif" border="0"></a>
<a onclick="javascript:emoticon(':wink:')" style="border-bottom-style: none;"><img src="/images/emotic/wink.gif" border="0"></a>
 
etc...

J'imagine que le soucis vient d'un conflit de noms de champs de formulaires, mais mes connaissances en JS étant limitées, je ne sais pas comment adapter le script.

Quelqu'un peut m'aider ? ;)

Bonjour,
passes l'objet FORM, ou son ID en paramètre à la fonction
Code:

1 2 3 4 5 6 function emoticon( text, id_form){ // get l'objet form var oForm = document.getElementById( id_form); // get la textarea de destination var oText = oForm.getElementsByTagName('TEXTAREA')[0]; // la suite du code
Il reste une inconnue c'est l'appel à la fonction, comment ce fait-elle, avec des buttons particuliers pour chaque FORM?

31/01/2012, 20h37
cybertaf

Non, ce sont les mêmes boutons pour tous les FORM, ils sont affichés via un script PHP. Je vais peut-être galérer avec ça aussi... :?

Je vais essayer de me dépatouiller avec ce que tu m'as donné, c'est déjà un début.

Merci beaucoup pour ta réponse en tout cas :)

dans ce cas il te faut connaître la TEXTAREA en cours, en gérant une variable oTextareaEnCours que tu peux affecter sur le onfocus des TEXTAREA par exemple.

Dans ce cas tu pourrais faire
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var oTextareaEnCours = null; function emoticon( text, id_form){ // le paramètre id_form devient superflus /* // get l'objet form var oForm = document.getElementById( id_form); // get la textarea de destination var oText = oForm.getElementsByTagName('TEXTAREA')[0]; */ var oText = oTextareaEnCours; if( oText){ // la suite du code } }

01/02/2012, 08h35
SpaceFrog

Adopte une syntaxe plus rigoureuse:

Code:

var txtarea = document.commentaire.message;

est une syntaxe laxiste

Code:

var txtarea = document.forms['commentaire'].elements['message'];

permet de cibler le formulaire