Liste déroulante renseignant textarea sans bouton valider

Eléphanteau du PHP | 14 Messages

16 juin 2008, 22:51

Bonjour,
Je voulais savoir s'il est possible de renseigner une textarea à partir d'une liste déroulante chargée à partir d'une BDD ?
Par exemple dans ma liste déroulante on a pizza, hamburger
En cliquant sur pizza cela affiche pizza dans la textarea (sans bouton submit).
Et ce sans changer de page
Merci

ViPHP
AB
ViPHP | 5818 Messages

16 juin 2008, 23:53

Oui tu peux utiliser le même principe que les bbcode.
Y'a plus simple mais si tu veux insérer du code à la position du curseur tu peux regarder ici
http://actuel.fr.selfhtml.org/articles/ ... /index.htm

Modérateur PHPfrance
Modérateur PHPfrance | 2575 Messages

17 juin 2008, 00:05

Bonjour PoteVince,

Tu dois utiliser Javascript pour ça. Je vais te donner une piste par deux exemples.

Exemple 1:

J'ai une liste déroulante qui contient 3 éléments et je veux afficher par une boite de message l'élément sélectionné. Je fais alors comme ça:
1. Le code de la liste :

Code : Tout sélectionner

<select id="liste1" name="liste1" onChange="afficher(this.value)"> <option value="">Choisir un élément ...</option> <option value="Element1">Élément 1</option> <option value="Element2">Élément 2</option> <option value="Element3">Élément 3</option> </select> <script> /** * @auteur : moi * @fonction : afficher un texte * @paramètre : texte (en entrée) : il s'agit d'un texte à afficher **/ function afficher(texte){ //Affiche le texte reçu comme paramètre alert(texte); } </script>
Remarques:
  • 1. Dans la balise <select> l'attribut "onChange" permet d'éxécuter un code javascript quand une option de la liste est sélectionnée par l'utilisateur

    2. Le mot "this" dont la valeur ".value" est passée comme paramètre est un mot réservé qui désigne l'objet en cours (la liste en l'occurence)
Résumé: Quand l'utilisateur change sa sélection dans la liste, l'événement "onChange" se déclenche sur la liste et exécute la fonction javascript "afficher" en lui passant le paramètre "this.value" c'est à dire la valeur sélectionnée dans la liste.
La fonction "afficher" reçoit la valeur "this.value" dans le paramètre "texte" prévu à cet effet et l'affiche sous forme de boite de message (commande alert() en javascript)

Exemple 2

Il faut savoir que toutes les balises HTML peuvent être utilisées dans le code Javascript à condition de les nommer par les attributs "id" et/ou "name"

Pour accéder à une balise <textarea> par exemple, on doit :
  • 1. lui donner un "id" et/ou un "name".
    Par exemple:

    Code : Tout sélectionner

    <textarea id="t1" name="t1">Coucou</textarea>
    2. dans le code javascript qui doit l'utiliser il faut référencer le textarea par son "id" ou "name".
    Par exemple, pour modifier son contenu :

    Code : Tout sélectionner

    <script> /** * @auteur : moi * @fonction : modifier le contenu d'un textarea * @paramètre : nouveauTexte(en entrée) : il s'agit d'un texte à affecter au textarea **/ function modifierTextarea(nouveauTexte){ //référence à mon textarea "t1" var t1 = document.getElementById("t1"); //modifier sont contenu en lui affectant le nouveauTexte t1.innerText = nouveauTexte; } </script>
La méthode document.getElementById("id d'une balise") permet de se pointer sur une balise HTML connaissant son "id" et on peut aussi utiliser une référence par "name" en utilisant document.getElementsByName("name d'une balise") Mais dans le standard xHTML l'attribut "name" n'est valide que pour référencer des zones dans un formulaire et non pour toutes les balises HTML. C'est pourquoi, il faut utiliser toujours en javascript, l'attribut "id" pour référencer les balises hors formulaires.

La propriété .innerText permet d'accéder au contenu texte d'une balise de type "conteneur" comme, <textarea>, <p>, <div>, <td>, ...
Aussi, existe la propriété .innerHTML qui est la soeur jumelle de .innerText même qui représente, elle, le contenu texte + sa mise en forme html.

Pour les balises de zones de formulaire : <input>, la propriété .value fait référence au contenu de la zone.

Bon, je t' espère bonne lecture en attendant ta réaction :wink:
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

Eléphanteau du PHP | 14 Messages

17 juin 2008, 11:00

Merci pour ces réponses.
Par contre j'avais commencé à le faire avec javascript mais mon problème était que je n'arrivais pas à supprimer un élément préalablement ajouté dans la textarea.
(http://www.pizzaplanet.fr/caisse9.html pour comprendre)