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 !