Discussion :

[hyper123]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Vercetti]

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

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?

[hyper123]

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

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.

[hyper123]

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

[Vercetti]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[hyper123]

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


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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>