par
sadeq » 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>
- 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:
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
Bonjour PoteVince,
Tu dois utiliser Javascript pour ça. Je vais te donner une piste par deux exemples.
[u]
[b]Exemple 1:[/b]
[/u]
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]<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>
[/code]
[b]Remarques:[/b]
[list]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)[/list]
[b]Résumé:[/b] 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)
[u][b]Exemple 2[/b][/u]
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 :
[list]1. lui donner un "id" et/ou un "name".
Par exemple: [code]<textarea id="t1" name="t1">Coucou</textarea>[/code]
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]<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>
[/code]
[/list]
La méthode [b] document.getElementById("id d'une balise")[/b] permet de se pointer sur une balise HTML connaissant son "id" et on peut aussi utiliser une référence par "name" en utilisant [b]document.getElementsByName("name d'une balise")[/b] 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é [b].innerText[/b] permet d'accéder au contenu texte d'une balise de type "conteneur" comme, <textarea>, <p>, <div>, <td>, ...
Aussi, existe la propriété [b].innerHTML[/b] 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é [b].value[/b] fait référence au contenu de la zone.
Bon, je t' espère bonne lecture en attendant ta réaction :wink:
