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>

[Vercetti]

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?

[hyper123]

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

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

[Vercetti]

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

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

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

[Bovino]

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>.

[Bovino]

Code :

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

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

Mouais...

Code :

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

var value_option=contrat.value;

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

[hyper123]

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

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??

[Bovino]

Code html :

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

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

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

<select id="contrat">

Code :

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

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

EDIT :

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

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

[hyper123]

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

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

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 :

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

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

et

Code javascript :

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

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

[hyper123]

Je suis perdu là...

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

[Kaamo]

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

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

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

revient en fait à

Code javascript :

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

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

Code html :

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

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

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

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