Discussion :

[cirvent]

Bonjour à tous,

désoler si je pose une question bete mais je connai tres peu le js.

voila le probleme, j'ai un formulaire avec un champs select et j'aimerai afficher des champs inupt suivant la sellection.

voici la partie de code en question:

Code :

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
<div class="form-row">
<div class="field-label"><label for="field10">Type du contrat</label>:</div>
<div class="field-widget">
 <select id="field10" name="field10" class="validate-selection" title="Choisir le type de contrat">
<option>Séléctionner un type...</option>
<option>CDI</option>
<option>CDD</option>
<option>Préstataire</option>
<option>Interimaire</option>
</select>
</div>
</div>
<div class="form-row">
<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
</div>
<div class="form-row">
<div class="field-label"><label for="field12">Société*</label>:</div>
<div class="field-widget"><input name="field12" id="field12" class="required validate-alphanum" title="Entrer le nom de la société" /></div>
</div>

il faudrai afficher pour:
cdi --> aucun des deux input
cdd --> le field11
prestataire et interimaire les deux input

quelle qu'un pour m'explique et m'aider ???

[bigboomshakala]

salut
sur ton select

Code :

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

onchange="toggleInput(this);"

Code :

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

1
2
3
4
5
6
7
8
function toggleInput(o)
{
  var choix = ... // récupère le choix
  document.getElementById('input1').style.display = (choix == 'toto' ? "block" : "none");
  document.getElementById('input2').style.display = (choix == 'titi' ? "block" : "none");
  document.getElementById('input3').style.display = (choix == 'tutu' ? "block" : "none");
  ...
}

par exemple

[cirvent]

merci pour ta reponse mais j'aurai encor besoin d'aide voici mes fichier:

fichier index:

Code :

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
25
26
27
28
29
 
<div class="form-row">
	<div class="field-label"><label for="field10">Type du contrat</label>:</div>
		<div class="field-widget">
			<select id="field10" name="field10" class="validate-selection" title="Choisir le type de contrat" onchange="toggleInput(this);">
				<option>Séléctionner un type...</option>
				<option>CDI</option>
				<option>CDD</option>
				<option>Préstataire</option>
				<option>Interimaire</option>
			</select>
		</div>
	</div>
<div id="CDD" style="display:none;">
	<div class="form-row">
		<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
		<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
	</div>
</div>
 <div id="autre" style="display:none;">
	<div class="form-row">
	        <div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
		<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
	</div>
        <div class="form-row" style="display:none;">
                <div class="field-label"><label for="field12">Société*</label>:</div>
	        <div class="field-widget"><input name="field12" id="field12" class="required validate-alphanum" title="Entrer le nom de la société" /></div>
         </div>
</div>

le fichier js.js

Code :

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

1
2
3
4
5
6
7
8
 
function toggleInput(o)
{
  var choix =
  document.getElementById('CDD').style.display = (choix == 'CDD' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Préstataire' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Interimaire' ? "block" : "none");
}

sa ne marche pas une idée du probleme ?

[bigboomshakala]

oh oui je vois bien quelques petites choses
déjà tu ne donnes pas de valeur à choix dans ta fonction
ensuite pour l'input "autre" tu fais 2 affectations au lieu d'une (la 1ere est annulée par la 2ème)
les <option> n'ont pas de value (c'est la value que tu dois récupérer et mettre dans ton choix), mais peut-être qu'en l'absence de value explicite la value équivaut au libellé ?

[E.Bzz]

Bonjour,
c'st la value qui compte pour les select :

Code :

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

onchange="toggleInput(this.value);"

et

Code :

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

1
2
3
4
5
<option value="-1">Séléctionner un type...</option>
<option value="CDI">CDI</option>
<option value="CDD">CDD</option>
<option value="Préstataire">Préstataire</option>
<option value="Interimaire">Interimaire</option>

A+

[cirvent]

sa marche toujour pas:

Code :

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
25
26
27
28
<div class="form-row">
	<div class="field-label"><label for="field10">Type du contrat</label>:</div>
	<div class="field-widget">
		<select id="field10" name="field10" class="validate-selection" title="Choisir le type de contrat" onchange="toggleInput(this.value);">
			<option value="-1">Séléctionner un type...</option>
			<option value="CDI">CDI</option>
			<option value="CDD">CDD</option>
			<option value="Préstataire">Préstataire</option>
			<option value="Interimaire">Interimaire</option>
		</select>
	</div>
</div>
	<div id="CDD" style="display:none;">
		<div class="form-row">
			<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
			<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
		</div>
	</div>
	<div id="autre" style="display:none;">
		<div class="form-row">
			<div class="field-label"><label for="field11">Date de fin de contrat/mission*</label>:</div>
			<div class="field-widget"><input name="field11" id="field11" class="required validate-date-au" title="Entrer la date de fin de contrat/mission" /></div>
		</div>
	<div class="form-row">
		<div class="field-label"><label for="field12">Société*</label>:</div>
		<div class="field-widget"><input name="field12" id="field12" class="required validate-alphanum" title="Entrer le nom de la société" /></div>
	</div>
</div>

Code :

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

1
2
3
4
5
6
7
function toggleInput(o)
{
  var choix = CDD, Préstataire, Interimaire
  document.getElementById('CDD').style.display = (choix == 'CDD' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Préstataire' ? "block" : "none");
  document.getElementById('autre').style.display = (choix == 'Interimaire' ? "block" : "none");
}

une idée ?

[bigboomshakala]

une idée ?

oui...

Code :

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

1
2
3
4
5
function toggleInput(o)
{
  document.getElementById('CDD').style.display = (o== 'CDD' ? "block" : "none");
  document.getElementById('autre').style.display = (o == 'Préstataire' || o == 'Interimaire' ? "block" : "none");
}

[E.Bzz]

Heu ... c'est quoi ça

Code :

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

var choix = CDD, Préstataire, Interimaire

Pas du JS, en tous cas ...

EDIT : grilled

A+

[bigboomshakala]

sinon pour info
Prestataire
Intérimaire

[cirvent]

heu rectification a priori sa fonctionne bien !!

[cirvent]

nikel les gas je vous remercie énormément !