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 : 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
 
<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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 ?