[Réglé] Aide sur Javascript

dznet · 27 Novembre 2008

Bonjour,

Je cherche un scripte depuis plusieurs jour qui me permettrais de faire un choix d'une valeur dans une liste déroulante, cliquez sur ajouter.
Alors le diminutif de cette valeur s'ajoute a un champs se trouvant dessous.

plusieurs choix de valeur serait possible et les valeur serait séparé par une virgule.

Le scripte ressemble a celui-ci (Scripte du plugin TAG de Dotclear), mais il ne sont pas en forme de liste déroulante mais en lien.

Est-ce qu'une âme charitable pourrai m'aidez a mettre les choix dans une liste déroulante, puis cliquez sur un bouton pour l'ajouter au champs

Merci

Code:

// JavaScript Document
<script type="text/javascript">
// fonction
function twTags_add(tag)
{
	lt = document.getElementById('twtags').list_tags;
	if (lt.value != '')
		lt.value += ', ' + tag;
	else
		lt.value = tag;
}
</script>
// le champ
<div id="tagBox" class="moreOptions">
<form method="post" id="twtags" action="tools.php?p=twtags&amp;post_id=15&amp;gmi=1" onsubmit="formSubmit=true;">
<p class="field"><label for="list_tags"><strong>Tags définis</strong></label>
<input type="text" size="80" name="list_tags" id="list_tags" maxlength="256" class="max" /></p>
 
// les valeur a ajoutées
<p class="field"><label class="inline" for="new_tags">Associer un nouveau tag&nbsp;:</label> 
<a href="#twtags" onclick="twTags_add('V1'); return false;">Valeur 1</a>, 
<a href="#twtags" onclick="twTags_add('V2'); return false;">Valeur 2</a>, 
<a href="#twtags" onclick="twTags_add('V3'); return false;">Valeur 3</a>, 
<a href="#twtags" onclick="twTags_add('V4'); return false;">Valeur 4</a>, 
<a href="#twtags" onclick="twTags_add('V5'); return false;">Valeur 5</a>, 
<a href="#twtags" onclick="twTags_add('V6'); return false;">Valeur 6</a>, 
<a href="#twtags" onclick="twTags_add('V7'); return false;">Valeur 7</a>, 
<a href="#twtags" onclick="twTags_add('V8'); return false;">Valeur 8</a>, 
<a href="#twtags" onclick="twTags_add('V9'); return false;">Valeur 9</a>, 
<a href="#twtags" onclick="twTags_add('V10'); return false;">Valeur 10</a></p>
<p class="field"><input class="submit" type="submit" value="enregistrer" /></p>
<input type="hidden" name="dctoken" value="f77dc720e4ec236144121e36805a6daf" /></form></div>

Sullyvan · 27 Novembre 2008

bonjour,

c'est un truc comme sur le site seloger.com que tu cherches ?

dznet · 27 Novembre 2008

Sullyvan a dit:
bonjour,

c'est un truc comme sur le site seloger.com que tu cherches ?

Oui voila a peu prêt, la seul différence que je veux c'est quant tu clique exp. sur Bâtiment, Bât. qui se met dans le champs, pas le mot entier.

Car dans mon cas se sont des phrase de risque et de sécurité type :

"R67 : L'inhalation de vapeurs peut provoquer somnolence et vertiges." donc assez longue.

Quand je choisirez cette phrase, il y aurait que R67 qui apparaît dans le champs.

Je ne sais pas si je suis claire

Merci

Sullyvan · 27 Novembre 2008

en gros il faut remplacer ça par une liste déroulante:

Code:

<a href="#twtags" onclick="twTags_add('V1'); return false;">Valeur 1</a>,
<a href="#twtags" onclick="twTags_add('V2'); return false;">Valeur 2</a>,
<a href="#twtags" onclick="twTags_add('V3'); return false;">Valeur 3</a>,
<a href="#twtags" onclick="twTags_add('V4'); return false;">Valeur 4</a>,
<a href="#twtags" onclick="twTags_add('V5'); return false;">Valeur 5</a>,
<a href="#twtags" onclick="twTags_add('V6'); return false;">Valeur 6</a>,
<a href="#twtags" onclick="twTags_add('V7'); return false;">Valeur 7</a>,
<a href="#twtags" onclick="twTags_add('V8'); return false;">Valeur 8</a>,
<a href="#twtags" onclick="twTags_add('V9'); return false;">Valeur 9</a>,
<a href="#twtags" onclick="twTags_add('V10'); return false;">Valeur 10</a>

Et ajouter un bouton qui change le champs.

Code:

<select id="liste">
<option value="V1">Valeur 1</option>
<option value="V2">Valeur 2</option>
<option value="V3">Valeur 3</option>
...
<option value="Vn">Valeur n</option>
</select>
<input type="button" onclick="twTags_add(document.getElementById('liste').value)" value="Ajouter" />

Ca devrait faire l'affaire.

dznet · 27 Novembre 2008

Oui, c'est ça, mais ça ne fonctionne pas chez moi !

psykoko · 27 Novembre 2008

Bonjour,

Qu'as tu comme message d'erreur?
Si tu es sous firefox, installe firebug... et post l'erreur ici

dznet · 27 Novembre 2008

Je viens d'installé le module, mais je n'y comprend rien

En générale j'utilise IE7 (Je sais je sais... ^^)

psykoko · 27 Novembre 2008

lol
ok

Tu as installé Firebug, cool.
Maintenant, tu dois l'activer : en bas à droite, tu dois avoir un petit cafard ("bug")
Tu cliques dessus : puis tu actives console et script
Hop !
Tu lances ta page, et là, tu dois voir une erreur en rouge, par exemple

Tu nous la donnes... et je verrais si je peux t'aider

Sullyvan · 27 Novembre 2008

j'ai testé le code dans IE7 et firefox et il fonctionne:

Code:

<html>
<head>
<script type="text/javascript">
// fonction
function twTags_add(tag)
{
   lt = document.getElementById('twtags').list_tags;
   if (lt.value != '')
      lt.value += ', ' + tag;
   else
      lt.value = tag;
}
</script>
</head>
<body>

<!-- le champ -->
<div id="tagBox" class="moreOptions">
<form method="post" id="twtags" action="tools.php?p=twtags&amp;post_id=15&amp;gmi=1" onsubmit="formSubmit=true;">
<p class="field"><label for="list_tags"><strong>Tags définis</strong></label>
<input type="text" size="80" name="list_tags" id="list_tags" maxlength="256" class="max" /></p>
 
<!--  les valeur a ajoutées -->
<p class="field"><label class="inline" for="new_tags">Associer un nouveau tag&nbsp;:</label>
<select id="liste">
<option value="V1">Valeur 1</option>
<option value="V2">Valeur 2</option>
<option value="V3">Valeur 3</option>
<option value="Vn">Valeur n</option>
</select>
<input type="button" onclick="twTags_add(document.getElementById('liste').value)" value="Ajouter" /></p>
<p class="field"><input class="submit" type="submit" value="enregistrer" /></p>
<input type="hidden" name="dctoken" value="f77dc720e4ec236144121e36805a6daf" /></form></div>
</body>
</html>

dznet · 27 Novembre 2008

Bon ça ne me donne aucune erreur :roll:

pour faire simple dans ma page teste j'ai que ça

Code:

// JavaScript Document
<script type="text/javascript">
function twTags_add(tag)
{
	lt = document.getElementById('twtags').list_tags;
	if (lt.value != '')
		lt.value += ', ' + tag;
	else
		lt.value = tag;
}
</script>
<select id="liste"> 
<option value="V1">Valeur 1</option> 
<option value="V2">Valeur 2</option> 
<option value="V3">Valeur 3</option> 
<option value="Vn">Valeur n</option> 
</select> 
<input type="button" onclick="twTags_add(document.getElementById('liste').value)" value="Ajouter" />

<p><label for="list_r">Tags définis</label>
<input type="text" size="80" name="list_tags" id="list_tags" maxlength="256" class="max" /></p>

psykoko · 27 Novembre 2008

idem pour moi, cela fonctionne...

dznet · 27 Novembre 2008

Merci Sullyvan, ça marche nickel!! sur les deux navigateur!
Merci beaucoup

Sullyvan · 27 Novembre 2008

il manque le formulaire dans le code que tu as testé, remplace la fonction par celle-ci:

Code:

<script type="text/javascript">
function twTags_add(tag)
{
   lt = document.getElementById('list_tags');
   if (lt.value != '')
      lt.value += ', ' + tag;
   else
      lt.value = tag;
}
</script>

Edit: De rien

dznet · 27 Novembre 2008

Ok Merci beaucoup.

Pour amélioré se script, comment faire pour eviter de mettre deux fois le même choix.

Comme c'est le cas de ce scripte sur devollopez.net >>> ici <<<

Sullyvan · 27 Novembre 2008

on peut faire comme ça:

1- récupérer la valeur du champ
2- la transformer en tableau avec la commande split
3- faire une boucle pour vérifier si la valeur n'est pas déjà là
4- si elle est là ne rien faire
4bis- se elle n'est pas là l'ajouter

dznet · 27 Novembre 2008

Je suis un cancre en javascript

Sullyvan · 27 Novembre 2008

je suis trop gentil..

Code:

<script type="text/javascript">
function twTags_add(tag) {
   lt = document.getElementById('list_tags');
   if (lt.value != '') {
      // recuperation et trasformation des tags
      tags = lt.value.split(', ');
      for (var i=0; i<tags.length;i++) {
           if (tags[i] == tag) { tag = ''; break;}           
      }
      if (tag) lt.value += ', ' + tag;
   } else lt.value = tag;
}
</script>

je n'ai pas testé mais ça devrait le faire

dznet · 27 Novembre 2008

Je confirme tu es trop gentil

Sullyvan
ça marche ! je vais tenté d'ajouté un message "oups cette selection existe déja"

En tous cas merci beaucoup

Dz

dznet · 27 Novembre 2008

C'est bon j'ai trouvé lol

Code:

<script type="text/javascript"> 
function twTags_add(tag) { 
   lt = document.getElementById('list_tags'); 
   if (lt.value != '') { 
      // recuperation et trasformation des tags 
      tags = lt.value.split(', '); 
      for (var i=0; i<tags.length;i++) { 
           if (tags[i] == tag) { tag = '' ; 
           alert('Cette option est déjà séléctionnée !!!'); break;}            
      } 
      if (tag) lt.value += ', ' + tag; 
   } else lt.value = tag; 
} 
</script>

Merci encore une fois de votre aide très très prècieuse

Sullyvan · 27 Novembre 2008

de rien, le tout c'est de tirer partie de ces aides.