Affichage d'un champ caché selon choix dans menu déroulant

Bonjour à tous !
Ces derniers temps vous m'avez beaucoup aidé et cela m'a permis de m'ameliorer en PHP.Mais je reste néophyte (et encore...^^) dans l'utilisation du JavaScript.
J'aimerai afficher un champ "caché" lorsque je selectionne un choix spécifique dans mon menu déroulant.

Voici mon menu déroulant :

Code:

---

1 2 3 4 5 6 7 8 9 10

<label for="contrat">Contrat *:</label> <select id="contrat" name="contrat"> <option value="CDI" selected="selected">CDI</option> <option value="CDD">CDD</option> <option value="Interimaire">Interimaire</option> <option value="Prestataire">Prestataire</option> <option value="Auxiliaire">Auxiliaire d'été</option> <option value="Stagiaire">Stagiaire</option> <option value="Alternant">Alternant</option> </select>

---

Il faudrait que lorsque je selectionne PRESTATAIRE dans la liste , il y ait des champ qui n'etait pas visible qui s'affiche :
• Type de prestation
• Nom de la société
• Dates de contrat (début et fin)
• Référence du contrat
• Affectation du prestataire


On m'a conseillé d'utiliser JS mais alors là je n'y connais rien.
Le formulaire est en HTML et derriere ca je récupere mes variables en PHP que j'envoie grace à la fonction mail().

MErci d'avance pour votre aide ! :ccool:

Un peu de lecture sur javascript sera indispensable, mais c'est plutôt sympa comme langage :ccool:

Je ne comprend pas très bien ce que tu souhaites exactement. Tu veux rajouter dans la balise select différentes options après avoir cliqué sur prestataire ou ajouter un autre type de champ dans ta page?

Vercetti tu as raison je fais de la lecture JS en ce moment-meme :P

En fait j'aimerai que lorsque je selectionne Prestataire (choix possible dans ma liste déroulante presentée dans mon post), il y ait une éxécution javascript qui affiche de nouveaux champs de saisie, 5 nouveauxchamps exactement.

• Type de prestation
• Nom de la société
• Dates de contrat (début et fin)
• Référence du contrat
• Affectation du prestataire

Mon probleme c'est que je ne sais pas comment faire ce code JS qui permet cela.

mais ces champs ne doivent etre visible que lorsque Prestataire est selectionné
Invisible sinon

Ok, alors un petit exemple pour essayer de t'aider sur l'affichage des nouveaux champs, qui reste à adapter à ton besoin :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<select id="liste" name="liste"> <option onclick="add()" value="CDI" selected="selected">CDI</option> <option onclick="add()" value="CDD">CDD</option> <option onclick="add()" value="Interimaire">Interimaire</option> <option onclick="add()" value="Prestataire">Prestataire</option> <option onclick="add()" value="Auxiliaire">Auxiliaire d'été</option> <option onclick="add()" value="Stagiaire">Stagiaire</option> <option onclick="add()" value="Alternant">Alternant</option> </select>   <div id="elements"> </div>

---

J'ai juste ajouter une fonction add() et une div dans laquelle seront placés les champs à ajouter.

La fonction add ajoute juste un champ text lors du click, ça peut te donner des idées

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function add(){ //Ceci va te renvoyer la value de l'option sur laquelle tu as cliqué ce qui peut être utile pour la suite.. var value_option=liste.options[liste.selectedIndex].value); //liste correpond au name de ma balise select //======   //Creation d'un élément var option=document.createElement('input'); //Instanciation du type d'élément : text... option.type=("text"); //Instanciation de la valeur de l'input text option.value=value_option;   //On fixe ce champ input dans la div elements document.getElementById('elements').appendChild(option); }

---

Normalement lorsque tu click sur un champ cela va créer un élément input text.

Je suppose que selon le choix dans le select les champs à afficher varient. Il faut trouver une petite astuce pour afficher les champs correspondant selon la sélection.

Citation:

---

Envoyé par Vercetti

J'ai juste ajouter une fonction add() et une div dans laquelle seront placés les champs à ajouter.

---

C'est exactement ce qu'il me fallait !!
parceque je ne veux creer ces champs supplémentaires que lorsque je selectionne Prestataire
:P

Mais tu va parlé de la div, et dedans est ce que je dois mettre un input spécifique? prck tel quel rien ne se produit avec ce code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<label for="contrat">Contrat *:</label> <select id="contrat" name="contrat"> <option value="CDI" selected="selected">CDI</option> <option value="CDD">CDD</option> <option value="Interimaire">Interimaire</option> <option onclick="add()" value="Prestataire">Prestataire</option> <option value="Auxiliaire">Auxiliaire saisonnier</option> <option value="Stagiaire">Stagiaire</option> <option value="Alternant">Alternant</option> </select> <div id="elements"> </div>

---

Non cette <div> est vide de base, c'est à l'intérieur de celle-ci que les champs que l'on crée lors du click vous se placer!
Tu as placé la fonction javascript à la suite? Tu as réadapté les noms des champs aux tiens?

Oui j'ai réadapté les noms des champs comme tu peux le voir dans le bout de code que j'ai mis dans mon dernier post
La fonction javascript doit etre obligatoirement placée a la suite? Je ne le savais pas je dormirais moins bete :)

J'ai donc ce code la :

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

<p> <label for="contrat">Contrat *:</label> <select id="contrat" name="contrat"> <option value="CDI" selected="selected">CDI</option> <option value="CDD">CDD</option> <option value="Interimaire">Interimaire</option> <option onclick="add()" value="Prestataire">Prestataire</option> <option value="Auxiliaire">Auxiliaire saisonnier</option> <option value="Stagiaire">Stagiaire</option> <option value="Alternant">Alternant</option> </select> <script language =javascript> function add(){ var value_option=liste.options[liste.selectedIndex].value); var option=document.createElement('input'); option.type=("text"); option.value=value_option; document.getElementById('cache').appendChild(option); } </script>   <div id="cache">   </div>

---

Un petit debug t'aurais apporté la réponse, ajoute firebug(module firefox) si tu ne l'as pas c'est un outil très utile.

La ligne 14 :
Une parenthèse en trop à la fin, et il fallait remplacer "liste" par le name de ta balise select : contrat.

Code:

---

var value_option=contrat.options[contrat.selectedIndex].value;

---

Citation:

---

La fonction javascript doit etre obligatoirement placée a la suite?

---

Non, c'est même plutôt crade de mettre du JavaScript en plein milieu du HTML.
Les scripts doivent idéalement se placer dans le <head> ou juste avant la fermeture de </body>.
Le principal étant que lorsque le script est exécuté, les éléments sur lesquels il doit intervenir existent dans le DOM, ce qui est logiquement le cas à l'appel d'une fonction, mais ne l'est pas forcément lorsque tu définis des événements.

Attention aussi que onclick sur une balise <option> n'est pas supporté par tous les navigateurs. Il est recommandé de passer par onchange de la balise <select>.

Citation:

---

Code:

---

var value_option=contrat.options[contrat.selectedIndex].value;

---

---

Mouais...

Code:

---

var value_option=contrat.value;

---

est largement suffisant à moins d'avoir besoin d'être compatible avec IE4... :aie:

Merci du conseil pour Firebug :D
Et oui tu avais raison j'ai oublié de modifier dans le JS.

Citation:

---

Attention aussi que onclick sur une balise <option> n'est pas supporté par tous les navigateurs. Il est recommandé de passer par onchange de la balise <select>.

---

D'accord je vais donc changer le onclick pour un onChange mais comment cela se positionne t-il etant donné que tu me dis qu'il utilise la balise<select> et que j'utilise un menu deroulant??

Code:

---

<select onchange="alert(this.value);">

---

Attention, ce n'est qu'un exemple, une meilleure syntaxe étant de séparer le code HTML du code JavaScript :

Code:

---

<select id="contrat">

---

Code:

---

1 2 3

document.getElementById('contrat').onchange = function(){ alert(this.value); };

---

EDIT :

Citation:

---

etant donné que tu me dis qu'il utilise la balise<select> et que j'utilise un menu deroulant??

---

:koi:

C'est quoi pour toi la différence entre un select et un menu déroulant ? :?

Aucune mais je ne voyais pas comment changer mon code pour passer au onChange

Donc je récapitule. Au départ j'ai ce menu déroulant :

Code:

---

1 2 3 4 5 6 7 8 9 10

<label for="contrat">Contrat *:</label> <select id="contrat" name="contrat"> <option value="CDI" selected="selected">CDI</option> <option value="CDD">CDD</option> <option value="Interimaire">Interimaire</option> <option onclick="add()" value="Prestataire">Prestataire</option> <option value="Auxiliaire">Auxiliaire saisonnier</option> <option value="Stagiaire">Stagiaire</option> <option value="Alternant">Alternant</option> </select>

---

Avec cette fonction JS que je met dans mon <head> :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<script language =javascript> function add(){ <script language =javascript> function add(){ var value_option=contrat.value; var option=document.createElement('input'); option.type=("text"); option.value=value_option; document.getElementById('cache').appendChild(option); } </script>

---

Le onchange etant préférable je vais donc suivre tes conseils Bovino. Mais je ne sais vraiment quoi supprimer d emon code pour le changer par

Code:

---

<select onchange="alert(this.value);">

---

et

Code:

---

1 2 3

document.getElementById('contrat').onchange = function(){ alert(this.value); };

---

Je suis perdu là...

Je ne comprends pas comment utiliser tout ca. :arf:
J'ai juste besoin qu'un champ se crée lorsque je choisi "Prestataire" dans ma liste deroulante...:oops:

Il faut éviter les onclick dans les balises option. Il me semble qu'avec IE, ça ne marche pas.
Il faut plutôt utiliser, comme tout le monde te l'a conseillé, l'événement onchange sur la balise select directement.

Enfin, comme Bovino te l'a conseillé, il est préconisé de séparer tout code javascript du code html. Donc

Code:

---

1 2 3

document.getElementById('contrat').onchange = function(){ alert(this.value); };

---

revient en fait à

Code:

---

1 2 3

function maFonction(){ alert(document.getElementById('contrat').value); // affiche l'id de l'option sélectionnée };

---

Code:

---

1 2 3 4 5

<select id="contrat" onchange="maFonction()"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select>

---

ça permet de ne pas polluer le code html tout simplement.

Voici un exemple d'application, n'hésite pas à poser des questions sur le fonctionnement. Par contre, je ne vois pas quel est vraiment le problème ? Pourquoi veux-tu stocker ça dans un champ ??

ps : pour finir, évite d'appeler tes variables javascript par des noms de balises html (je pense à var option). Car :

Code:

---

1 2 3 4 5

var test = new Option(); console.log(test); // affiche <option></option>   var Option = 1; var test = new Option(); // Erreur car on a écrasé une fonction native javascript

---