Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 31/01/2012, 09h44   #1
Invité de passage
 
Inscription : décembre 2009
Messages : 6
Détails du profil
Informations forums :
Inscription : décembre 2009
Messages : 6
Points : 2
Points : 2
Par défaut Plusieurs formulaires et récupération d'élément

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 ?
cybertaf est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 31/01/2012, 20h14   #2
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
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?
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 31/01/2012, 20h37   #3
Invité de passage
 
Inscription : décembre 2009
Messages : 6
Détails du profil
Informations forums :
Inscription : décembre 2009
Messages : 6
Points : 2
Points : 2
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
cybertaf est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 31/01/2012, 22h16   #4
Modérateur
 
Avatar de NoSmoking
 
Homme
Inscription : janvier 2011
Messages : 2 944
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2011
Messages : 2 944
Points : 4 776
Points : 4 776
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
  }
}
NoSmoking est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 01/02/2012, 08h35   #5
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 071
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 071
Points : 45 201
Points : 45 201
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
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 07h11.


 
 
 
 
Partenaires

Hébergement Web